<template>
  <div class="work-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle bg-circle-1"></div>
      <div class="bg-circle bg-circle-2"></div>
      <div class="bg-circle bg-circle-3"></div>
    </div>

    <el-container>
      <el-header class="header">
        <div class="header-content">
          <div class="back-section">
            <el-button 
              type="text" 
              class="back-btn" 
              @click="$router.go(-1)"
            >
              <el-icon><ArrowLeft /></el-icon>
              <span class="btn-text">返回</span>
            </el-button>
          </div>
          <div class="title-section">
            <div class="title-container">
              <div class="title-icon">💼</div>
              <!-- <h1>工作模块</h1> -->
              <div class="title-decoration"></div>
            </div>
          </div>
          <div class="user-info">
            <el-button 
              type="text" 
              class="settings-btn" 
              @click="showSettings = true"
            >
              <el-icon><Setting /></el-icon>
              <span class="btn-text">设置</span>
            </el-button>
          </div>
        </div>
      </el-header>

      <el-main class="main">
        <!-- 主要倒计时卡片 -->
        <div class="countdown-card">
           <div class="work-time-card">
            <div id="date-time">
                 <p><span class="date-display">提示：当前时间为{{ currentDateTime }}</span></p>
            </div>
                
            <div id="work-time">
                <p>务正业时间(学习、考证、找工作、赚钱……)：</p>
                 <p>
                  <span>{{ getScheduleTime1('morning').timeRange }}</span>
                  <span class="work-time-state" :class="{ 'work-time-ing': getPeriodStatus('morning') === 'ongoing' }">
                    {{ getScheduleTime1('morning').duration }}
                  </span>
                </p>
                <p>
                  <span>{{ getScheduleTime1('afternoon').timeRange }}</span>
                  <span class="work-time-state" :class="{ 'work-time-ing': getPeriodStatus('afternoon') === 'ongoing' }">
                    {{ getScheduleTime1('afternoon').duration }}
                  </span>
                </p>
                <p>
                  <span>{{ getScheduleTime1('evening').timeRange }}</span>
                  <span class="work-time-state" :class="{ 'work-time-ing': getPeriodStatus('evening') === 'ongoing' }">
                    {{ getScheduleTime1('evening').duration }}
                  </span>
                </p>
                 <p>有多少个钟？用多少时间完成什么...?一个分多少部分？</p>
            </div>
          </div>

          <div class="countdown-display3" v-if="currentPeriod !== 'rest'">
            
            <div class="duration-selector">
              <el-select v-model="selectedDuration" placeholder="选择倒计时时长" size="small"
               :disabled="isPaused || isRunning">
                <el-option label="1分钟" :value="60" />
                <el-option label="3分钟" :value="180" />
                <el-option label="5分钟" :value="300" />
                <el-option label="10分钟" :value="600" />
                <el-option label="20分钟" :value="1200" />
                <el-option label="30分钟" :value="1800" />
                <el-option label="1小时" :value="3600" />
                <el-option label="2小时" :value="7200" />
              </el-select>
            </div>
            <div class="time-display">{{ formatTime3(displayTime) }}</div>
            <div class="countdown-controls">
              <el-button 
                v-if="!isRunning && !isPaused" 
                type="primary" 
                size="small"
                @click="startCountdown"
                :disabled="!selectedDuration"
                :icon="VideoPlay"
                class="record-controls-btn"
              >
                开始
              </el-button>
              <el-button 
                v-else-if="isRunning" 
                type="warning" 
                size="small"
                @click="pauseCountdown"
                :icon="VideoPause"
                class="record-controls-btn"
              >
                暂停
              </el-button>
              <el-button 
                v-else-if="isPaused" 
                type="success" 
                size="small"
                @click="resumeCountdown"
                :icon="VideoPlay"
                class="record-controls-btn"
              >
                继续
              </el-button>
              <el-button 
              type="danger" 
               v-if="isPaused || isRunning" 
              @click="saveRecord"
              :loading="saving"
              :icon="Checked"
              class="record-controls-btn"
            >
               结束
            </el-button>
      
            <el-button 
            type="success" 
              v-if="!isRunning && !isPaused" 
            @click="loadTodayTotal"
             :icon="Notebook"
            class="record-controls-btn"
          >
            记录
          </el-button>
              <el-button 
                type="info" 
                size="small"
                v-if="isPaused || isRunning" 
                @click="resetCountdown"
                :icon="Refresh"
                class="record-controls-btn"
              >
                重置
              </el-button>
            </div>
          </div>

          <div class="welcome-section" :class="{ 'welcome-section-rest': currentPeriod == 'rest' }">
            <h2 id="welcome">{{ welcomeMessage }}</h2>
          </div>
          
          <!-- 增强的倒计时显示 -->
          <div class="countdown-section">
            <div class="countdown-header">
              <!-- <div class="header-left">
                <h3>⏰ 倒计时</h3>
                <div class="current-time-info">
                  <span class="time-display">{{ currentTime.getHours() }}:{{ String(currentTime.getMinutes()).padStart(2, '0') }}</span>
                  <span class="date-display">{{ currentDateTime }}</span>
                </div>
              </div> -->
              <!-- <div class="period-badge" :class="currentPeriod">
                {{ getPeriodLabel(currentPeriod) }}
              </div> -->
            </div>
            
            <div class="countdown-display" id="countdown" :class="{ 'countdown-display-rest': currentPeriod == 'rest' }">
              <!-- 倒计时时间显示 - 只在工作时间显示 -->
              <div class="countdown-time" v-if="currentPeriod !== 'rest'">
                <div class="time-unit">
                  <span class="time-value">{{ countdownData.hours }}</span>
                  <span class="time-label">小时</span>
                </div>
                <div class="time-separator">:</div>
                <div class="time-unit">
                  <span class="time-value">{{ countdownData.minutes }}</span>
                  <span class="time-label">分钟</span>
                </div>
                <div class="time-separator">:</div>
                <div class="time-unit">
                  <span class="time-value">{{ countdownData.seconds }}</span>
                  <span class="time-label">秒</span>
                </div>
              </div>
              
              <!-- 休息时间显示 -->
              <div class="rest-time-display" v-if="currentPeriod === 'rest'">
                <!-- <div class="rest-icon">😴</div> -->
                <!-- <div class="rest-title">休息时间</div> -->
                <div class="rest-message">{{ saying }}</div>
                <!-- <div class="next-work-info">
                  <span>下次工作时间：{{ getNextWorkTime() }}</span>
                </div> -->
              </div>
              
              <!-- <div class="countdown-message">
                {{ countdownMessage }}
              </div> -->
              
              <!-- 进度条 - 只在工作时间显示 -->
              <div class="progress-section" v-if="currentPeriod !== 'rest'">
                <!-- 工作时间安排 -->
                <!-- <div class="work-schedule-display">
                  <div class="schedule-item" :class="getScheduleItemClass('morning')">
                    <span class="schedule-label">上午</span>
                    <span class="schedule-time" :class="getTimeClass('morning')">
                      {{ getScheduleTime('morning') }}
                    </span>
                    <span class="schedule-status" v-if="getScheduleStatus('morning')" :class="getStatusClass('morning')">
                      {{ getScheduleStatus('morning') }}
                    </span>
                  </div>
                  <div class="schedule-item" :class="getScheduleItemClass('afternoon')">
                    <span class="schedule-label">下午</span>
                    <span class="schedule-time" :class="getTimeClass('afternoon')">
                      {{ getScheduleTime('afternoon') }}
                    </span>
                    <span class="schedule-status" v-if="getScheduleStatus('afternoon')" :class="getStatusClass('afternoon')">
                      {{ getScheduleStatus('afternoon') }}
                    </span>
                  </div>
                  <div class="schedule-item" :class="getScheduleItemClass('evening')">
                    <span class="schedule-label">晚上</span>
                    <span class="schedule-time" :class="getTimeClass('evening')">
                      {{ getScheduleTime('evening') }}
                    </span>
                    <span class="schedule-status" v-if="getScheduleStatus('evening')" :class="getStatusClass('evening')">
                      {{ getScheduleStatus('evening') }}
                    </span>
                  </div>
                </div> -->
                
                <div class="progress-info">
                  <span>已过去: {{ elapsedTime }}</span>
                  <span class="progress-percentage">{{ progressPercentage }}%</span>
                </div>
                
                <div class="progress-bar">
                  <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
                </div>
                <div class="progress-details">
                  <span>剩余: {{ remainingTime }}</span>
                  <span>剩余: {{ remainingTime }} /共 {{ totalTime }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 快速操作按钮 -->
          <!-- <div class="quick-actions">
            <el-button 
              type="primary" 
              size="large" 
              @click="showSettings = true"
              class="action-btn"
            >
              <el-icon><Setting /></el-icon>
              工作时间设置
            </el-button>
            <el-button 
              type="success" 
              size="large" 
              @click="refreshCountdown"
              class="action-btn"
            >
              <el-icon><Refresh /></el-icon>
              刷新倒计时
            </el-button>
          </div> -->
        </div>

        <!-- 工作时间卡片 -->
        <!-- <div class="work-time-card">
          <div class="work-time-section">
            <h3>⏰ 工作时间安排</h3>
            <div class="time-blocks">
              <div class="time-block" :class="{ active: currentPeriod === 'morning' }">
                <span class="time-label">上午</span>
                <span class="time-range" id="morning">{{ morningTime }}</span>
              </div>
              <div class="time-block" :class="{ active: currentPeriod === 'afternoon' }">
                <span class="time-label">下午</span>
                <span class="time-range" id="afternoon">{{ afternoonTime }}</span>
              </div>
              <div class="time-block" :class="{ active: currentPeriod === 'evening' }">
                <span class="time-label">晚上</span>
                <span class="time-range" id="evening">{{ eveningTime }}</span>
              </div>
            </div>
          </div>
        </div> -->
      </el-main>
    </el-container>

    <!-- 悬浮主题切换按钮 -->
    <ThemeToggle />
    
    <!-- 设置对话框 -->
    <el-dialog 
      v-model="showSettings" 
      title="工作时间设置" 
      :width="isMobile ? '95%' : '600px'"
      :close-on-click-modal="false"
      class="work-settings-dialog"
    >
      <div class="settings-content">
        <div class="setting-section">
          <h4>⏰ 工作时间设置</h4>
          <div class="time-settings">
            <!-- 上午时间段 -->
            <div class="time-period-card" :class="{ 'mobile': isMobile }">
              <div class="period-header">
                <span class="period-icon">🌅</span>
                <span class="period-title">上午时间段</span>
              </div>
              <div class="time-inputs-group">
                <div class="time-input-item">
                  <label>开始时间</label>
                  <el-time-picker
                    v-model="timePickers.morning.start"
                    format="HH:mm"
                    placeholder="选择时间"
                    @change="onTimeChange('morning', 'start')"
                    :size="isMobile ? 'small' : 'default'"
                  />
                </div>
                <div class="time-input-item">
                  <label>结束时间</label>
                  <el-time-picker
                    v-model="timePickers.morning.end"
                    format="HH:mm"
                    placeholder="选择时间"
                    @change="onTimeChange('morning', 'end')"
                    :size="isMobile ? 'small' : 'default'"
                  />
                </div>
              </div>
            </div>

            <!-- 下午时间段 -->
            <div class="time-period-card" :class="{ 'mobile': isMobile }">
              <div class="period-header">
                <span class="period-icon">☀️</span>
                <span class="period-title">下午时间段</span>
              </div>
              <div class="time-inputs-group">
                <div class="time-input-item">
                  <label>开始时间</label>
                  <el-time-picker
                    v-model="timePickers.afternoon.start"
                    format="HH:mm"
                    placeholder="选择时间"
                    @change="onTimeChange('afternoon', 'start')"
                    :size="isMobile ? 'small' : 'default'"
                  />
                </div>
                <div class="time-input-item">
                  <label>结束时间</label>
                  <el-time-picker
                    v-model="timePickers.afternoon.end"
                    format="HH:mm"
                    placeholder="选择时间"
                    @change="onTimeChange('afternoon', 'end')"
                    :size="isMobile ? 'small' : 'default'"
                  />
                </div>
              </div>
            </div>

            <!-- 晚上时间段 -->
            <div class="time-period-card" :class="{ 'mobile-period-card' : 'mobile' }">
              <div class="period-header">
                <span class="period-icon">🌙</span>
                <span class="period-title">晚上时间段</span>
              </div>
              <div class="time-inputs-group">
                <div class="time-input-item">
                  <label>开始时间</label>
                  <el-time-picker
                    v-model="timePickers.evening.start"
                    format="HH:mm"
                    placeholder="选择时间"
                    @change="onTimeChange('evening', 'start')"
                    :size="isMobile ? 'small' : 'default'"
                  />
                </div>
                <div class="time-input-item">
                  <label>结束时间</label>
                  <el-time-picker
                    v-model="timePickers.evening.end"
                    format="HH:mm"
                    placeholder="选择时间"
                    @change="onTimeChange('evening', 'end')"
                    :size="isMobile ? 'small' : 'default'"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        

        
        <div class="setting-section">
          <h4>🔄 快速预设</h4>
          <div class="preset-buttons" :class="{ 'mobile': isMobile }">
            <el-button @click="loadPreset('standard')" type="primary" :size="isMobile ? 'small' : 'default'">日常工作时间</el-button>
            <el-button @click="loadPreset('flexible')" type="success" :size="isMobile ? 'small' : 'default'">周末工作时间</el-button>
            <el-button @click="resetToDefault" type="info" :size="isMobile ? 'small' : 'default'">重置为默认</el-button>
          </div>
          
          <div class="custom-presets" style="margin-top: 20px;">
            <h5 style="margin: 0 0 15px 0; color: #666;">自定义预设</h5>
            <div class="preset-list" :class="{ 'mobile': isMobile }">
              <div v-for="(preset, id) in customPresets" :key="id" class="preset-item" :class="{ 'mobile': isMobile }">
                <span class="preset-name">{{ preset.name }}</span>
                <div class="preset-actions" :class="{ 'mobile': isMobile }">
                  <el-button size="small" @click="loadCustomPreset(Number(id))" type="primary">加载</el-button>
                  <el-button size="small" @click="editCustomPreset(Number(id))" type="warning">编辑</el-button>
                  <el-button size="small" @click="deleteCustomPreset(Number(id))" type="danger">删除</el-button>
                </div>
              </div>
            </div>
            
            <div class="add-preset-section" :class="{ 'mobile': isMobile }" style="margin-top: 15px;">
              <el-button @click="showAddPreset = true" type="success" size="small">
                <el-icon><Plus /></el-icon>
                添加新预设
              </el-button>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer" :class="{ 'mobile': isMobile }">
          <el-button @click="showSettings = false" :size="isMobile ? 'small' : 'default'">关闭</el-button>
          <el-button type="primary" @click="saveSettings" :size="isMobile ? 'small' : 'default'">保存设置</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 添加/编辑预设对话框 -->
    <el-dialog 
      v-model="showAddPreset" 
      :title="editingPreset ? '编辑预设' : '添加新预设'" 
      :width="isMobile ? '98%' : '500px'"
      :close-on-click-modal="false"
      @close="onPresetDialogClose"
      class="preset-dialog"
    >
      <div class="preset-form">
        <!-- 预设名称 -->
        <div class="preset-name-section">
          <h5 class="preset-name-title">📝 预设名称</h5>
          <el-input 
            v-model="newPreset.name" 
            placeholder="请输入预设名称"
            maxlength="20"
            :size="isMobile ? 'small' : 'default'"
            class="preset-name-input"
          />
        </div>
        
        <!-- 时间设置 -->
        <div class="preset-time-settings">
          <h5 class="preset-time-title">⏰ 时间设置</h5>
          
          <!-- 上午时间段 -->
          <div class="time-period-card" :class="{ 'mobile': isMobile }">
            <div class="period-header">
              <span class="period-icon">🌅</span>
              <span class="period-title">上午时间段</span>
            </div>
            <div class="time-inputs-group">
              <div class="time-input-item">
                <label>开始时间</label>
                <el-time-picker
                  v-model="newPreset.morning.start"
                  format="HH:mm"
                  placeholder="选择时间"
                  :size="isMobile ? 'small' : 'default'"
                />
              </div>
              <div class="time-input-item">
                <label>结束时间</label>
                <el-time-picker
                  v-model="newPreset.morning.end"
                  format="HH:mm"
                  placeholder="选择时间"
                  :size="isMobile ? 'small' : 'default'"
                />
              </div>
            </div>
          </div>

          <!-- 下午时间段 -->
          <div class="time-period-card" :class="{ 'mobile': isMobile }">
            <div class="period-header">
              <span class="period-icon">☀️</span>
              <span class="period-title">下午时间段</span>
            </div>
            <div class="time-inputs-group">
              <div class="time-input-item">
                <label>开始时间</label>
                <el-time-picker
                  v-model="newPreset.afternoon.start"
                  format="HH:mm"
                  placeholder="选择时间"
                  :size="isMobile ? 'small' : 'default'"
                />
              </div>
              <div class="time-input-item">
                <label>结束时间</label>
                <el-time-picker
                  v-model="newPreset.afternoon.end"
                  format="HH:mm"
                  placeholder="选择时间"
                  :size="isMobile ? 'small' : 'default'"
                />
              </div>
            </div>
          </div>

          <!-- 晚上时间段 -->
          <div class="time-period-card" :class="{ 'mobile': isMobile }">
            <div class="period-header">
              <span class="period-icon">🌙</span>
              <span class="period-title">晚上时间段</span>
            </div>
            <div class="time-inputs-group">
              <div class="time-input-item">
                <label>开始时间</label>
                <el-time-picker
                  v-model="newPreset.evening.start"
                  format="HH:mm"
                  placeholder="选择时间"
                  :size="isMobile ? 'small' : 'default'"
                />
              </div>
              <div class="time-input-item">
                <label>结束时间</label>
                <el-time-picker
                  v-model="newPreset.evening.end"
                  format="HH:mm"
                  placeholder="选择时间"
                  :size="isMobile ? 'small' : 'default'"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer" :class="{ 'mobile': isMobile }">
          <el-button @click="showAddPreset = false" :size="isMobile ? 'small' : 'default'">取消</el-button>
          <el-button @click="saveCustomPreset" type="primary" :size="isMobile ? 'small' : 'default'">
            {{ editingPreset ? '更新' : '保存' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useThemeStore } from '../stores/theme'
import ThemeToggle from '../components/ThemeToggle.vue'
import { ArrowLeft, Setting, Plus, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '../utils/request'

const authStore = useAuthStore()
const themeStore = useThemeStore()

// 获取当前主题状态
const currentTheme = computed(() => themeStore.currentTheme)
const isDarkTheme = computed(() => currentTheme.value === 'dark')

// 响应式数据
const currentTime = ref(new Date())
const countdownMessage = ref('')
const welcomeMessage = ref('')
const currentPeriod = ref('')
const showSettings = ref(false)
const showAddPreset = ref(false)
const editingPreset = ref(null)

// 倒计时相关数据
const countdownData = ref({ hours: 0, minutes: 0, seconds: 0 })
const progressPercentage = ref(0)
const elapsedTime = ref('')
const remainingTime = ref('')
const totalTime = ref('')

//谚语数据
const saying = ref('')
// -------------------------- 名言请求（不变） --------------------------
const fetchSaying = async () => {
  try {
    const res = await request.get('/getSaying')
    saying.value = res.data
  } catch (err) {
    console.error('获取谚语失败:', err)
    saying.value = '岁月不居，时节如流。 —— 论盛孝章书'
  }
}

//小倒计时相关数据
import dayjs from 'dayjs'
import { Notebook,Checked,VideoPlay, VideoPause, CircleClose, Close,  Clock, Bell, Edit, Check, Headset, Notification, Message, QuestionFilled, Tools, Download, Upload, Mute, Minus, Microphone,  BellFilled, ArrowDown, ArrowRight } from '@element-plus/icons-vue'
// 导入计时器服务
import timerService from '../utils/timerService'
const isRunning = ref(false)
const isPaused = ref(false)
const displayTime = ref(0)
const selectedDuration = ref(3600)
const recordedTime = ref(0)
const todayTotal = ref(0)
const saving = ref(false)
let countdownInstance = null
const formatTime3 = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const startCountdown = () => {
  if (!isRunning.value && !isPaused.value && selectedDuration.value) {
    // // 预加载音频文件（用户交互后）
    // if (notificationEnabled.value && selectedSound.value !== 'none') {
    //   preloadAudio(selectedSound.value)
    // }
    
    // 使用计时器服务创建倒计时
    countdownInstance = timerService.createCountdown({
      duration: selectedDuration.value,
      onUpdate: (remaining) => {
        displayTime.value = remaining
      },
      onComplete: () => {
        isRunning.value = false
        isPaused.value = false
        recordedTime.value = selectedDuration.value
        ElMessage.success('倒计时结束！')
        // playNotification()
      },
      onStart: () => {
        isRunning.value = true
        isPaused.value = false
        displayTime.value = selectedDuration.value
      },
      onPause: () => {
        isRunning.value = false
        isPaused.value = true
      },
      onResume: () => {
        isRunning.value = true
        isPaused.value = false
      },
      onStop: () => {
        isRunning.value = false
        isPaused.value = false
      }
    })
    
    countdownInstance.start()
  }
}

const pauseCountdown = () => {
  if (isRunning.value && countdownInstance) {
    countdownInstance.pause()
  }
}

const resumeCountdown = () => {
  if (isPaused.value && countdownInstance) {
    countdownInstance.resume()
  }
}

// const stopCountdown = () => {
//   if (countdownInstance) {
//     countdownInstance.stop()
//     countdownInstance = null
//   }
//   isRunning.value = false
//   isPaused.value = false
//   recordedTime.value = selectedDuration.value - displayTime.value
//   displayTime.value = 0
// }

const resetCountdown = () => {
  if (countdownInstance) {
    countdownInstance.stop()
    countdownInstance = null
  }
  isRunning.value = false
  isPaused.value = false
  displayTime.value = 0
  // recordedTime.value = 0
  startCountdown()
}

const loadTodayTotal = async () => {
  if(displayTime.value > 0){
    displayTime.value = 0
    return
  }
  try {
    const response = await  request.get('/timer/today/total')
    displayTime.value = response.data.totalTime
  } catch (error) {
    console.error('获取今日总计失败:', error)
  }
}

const saveRecord = async () => {

  if (countdownInstance) {
    countdownInstance.stop()
    countdownInstance = null
  }
  isRunning.value = false
  isPaused.value = false
  recordedTime.value = selectedDuration.value - displayTime.value
  displayTime.value = 0

  if (recordedTime.value <= 0) {
    ElMessage.warning('没有可保存的记录')
    return
  }
  
  try {
    saving.value = true
    const today = dayjs().format('YYYY-MM-DD')
    await  request.post('/timer/record', {
      date: today,
      duration: recordedTime.value,
      type: 'countdown'
    })
    ElMessage.success('记录保存成功')
    recordedTime.value = 0
    // await loadTodayTotal()
  } catch (error) {
    console.error('保存记录失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

// const hasRecordedTime = computed(() => recordedTime.value > 0)




// 手机端检测
const isMobile = ref(false)
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 默认工作时间配置
const defaultWorkSchedule = {
  morning: { start: '07:30', end: '12:00', duration: '4.5h' },
  afternoon: { start: '14:00', end: '17:30', duration: '3.5h' },
  evening: { start: '19:00', end: '23:00', duration: '4h' }
}



// 工作时间配置（响应式）
const workSchedule = ref(JSON.parse(JSON.stringify(defaultWorkSchedule)))

// 时间选择器使用的Date对象
const timePickers = ref({
  morning: { start: null, end: null },
  afternoon: { start: null, end: null },
  evening: { start: null, end: null }
})

// 自定义预设
const customPresets = ref({})

// 新预设表单
const newPreset = ref({
  id: null,
  name: '',
  morning: { start: null, end: null },
  afternoon: { start: null, end: null },
  evening: { start: null, end: null }
})

// 计算当前时间段
const getCurrentPeriod = (hours, minutes = 0) => {
  const now = new Date()
  now.setHours(hours, minutes, 0, 0)
  
  const morningStart = parseTime(workSchedule.value.morning.start)
  const morningEnd = parseTime(workSchedule.value.morning.end)
  const afternoonStart = parseTime(workSchedule.value.afternoon.start)
  const afternoonEnd = parseTime(workSchedule.value.afternoon.end)
  const eveningStart = parseTime(workSchedule.value.evening.start)
  const eveningEnd = parseTime(workSchedule.value.evening.end)
  
  // 处理跨天的情况（比如夜班从22:00到06:00）
  if (morningStart > morningEnd) {
    // 上午跨天，比如22:00-06:00
    if (hours >= morningStart || hours < morningEnd) return 'morning'
  } else {
    if (now >= morningStart && now < morningEnd) return 'morning'
  }
  
  if (afternoonStart > afternoonEnd) {
    // 下午跨天
    if (hours >= afternoonStart || hours < afternoonEnd) return 'afternoon'
  } else {
    if (now >= afternoonStart && now < afternoonEnd) return 'afternoon'
  }
  
  if (eveningStart > eveningEnd) {
    // 晚上跨天
    if (hours >= eveningStart || hours < eveningEnd) return 'evening'
  } else {
    if (now >= eveningStart && now < eveningEnd) return 'evening'
  }
  
  return 'rest'
}

// 获取时间段标签
const getPeriodLabel = (period) => {
  const labels = {
    morning: '上午工作',
    afternoon: '下午工作', 
    evening: '晚上工作',
    rest: '休息时间'
  }
  return labels[period] || '未知'
}

// 获取下次工作时间
const getNextWorkTime = () => {
  const now = new Date()
  const currentHours = now.getHours()
  const currentMinutes = now.getMinutes()
  const currentTime = currentHours * 60 + currentMinutes
  
  // 获取实际配置的工作时间
  const morningStart = parseTime(workSchedule.value.morning.start)
  const morningEnd = parseTime(workSchedule.value.morning.end)
  const afternoonStart = parseTime(workSchedule.value.afternoon.start)
  const afternoonEnd = parseTime(workSchedule.value.afternoon.end)
  const eveningStart = parseTime(workSchedule.value.evening.start)
  const eveningEnd = parseTime(workSchedule.value.evening.end)
  
  // 转换为分钟数进行比较
  const morningStartMinutes = morningStart.getHours() * 60 + morningStart.getMinutes()
  const morningEndMinutes = morningEnd.getHours() * 60 + morningEnd.getMinutes()
  const afternoonStartMinutes = afternoonStart.getHours() * 60 + afternoonStart.getMinutes()
  const afternoonEndMinutes = afternoonEnd.getHours() * 60 + afternoonEnd.getMinutes()
  const eveningStartMinutes = eveningStart.getHours() * 60 + eveningStart.getMinutes()
  const eveningEndMinutes = eveningEnd.getHours() * 60 + eveningEnd.getMinutes()
  
  // 处理跨天的情况
  const isMorningCrossDay = morningStartMinutes > morningEndMinutes
  const isAfternoonCrossDay = afternoonStartMinutes > afternoonEndMinutes
  const isEveningCrossDay = eveningStartMinutes > eveningEndMinutes
  
  // 判断当前时间段
  let currentPeriod = 'rest'
  
  if (isMorningCrossDay) {
    // 上午跨天，比如22:00-06:00
    if (currentTime >= morningStartMinutes || currentTime < morningEndMinutes) {
      currentPeriod = 'morning'
    }
  } else {
    if (currentTime >= morningStartMinutes && currentTime < morningEndMinutes) {
      currentPeriod = 'morning'
    }
  }
  
  if (isAfternoonCrossDay) {
    // 下午跨天
    if (currentTime >= afternoonStartMinutes || currentTime < afternoonEndMinutes) {
      currentPeriod = 'afternoon'
    }
  } else {
    if (currentTime >= afternoonStartMinutes && currentTime < afternoonEndMinutes) {
      currentPeriod = 'afternoon'
    }
  }
  
  if (isEveningCrossDay) {
    // 晚上跨天
    if (currentTime >= eveningStartMinutes || currentTime < eveningEndMinutes) {
      currentPeriod = 'evening'
    }
  } else {
    if (currentTime >= eveningStartMinutes && currentTime < eveningEndMinutes) {
      currentPeriod = 'evening'
    }
  }
  
  // 根据当前时间段确定下次工作时间
  if (currentPeriod === 'morning') {
    // 当前是上午工作，下次是下午工作
    return `${formatTime(afternoonStart)} (下午)`
  } else if (currentPeriod === 'afternoon') {
    // 当前是下午工作，下次是晚上工作
    return `${formatTime(eveningStart)} (晚上)`
  } else if (currentPeriod === 'evening') {
    // 当前是晚上工作，下次是明天上午工作
    const tomorrow = new Date(now)
    tomorrow.setDate(tomorrow.getDate() + 1)
    return `明天 ${formatTime(morningStart)} (上午)`
  } else {
    // 当前是休息时间，需要判断下一个工作时间段
    if (currentTime < morningStartMinutes) {
      // 还没到上午工作时间
      return `${formatTime(morningStart)} (上午)`
    } else if (currentTime < afternoonStartMinutes) {
      // 上午工作时间已过，下次是下午
      return `${formatTime(afternoonStart)} (下午)`
    } else if (currentTime < eveningStartMinutes) {
      // 下午工作时间已过，下次是晚上
      return `${formatTime(eveningStart)} (晚上)`
    } else {
      // 所有工作时间都过了，下次是明天上午
      const tomorrow = new Date(now)
      tomorrow.setDate(tomorrow.getDate() + 1)
      return `明天 ${formatTime(morningStart)} (上午)`
    }
  }
}

// 获取时间段标签（用于欢迎信息）
const getPeriodOfDay = (hours) => {
  const periods = [
    { from: 0, to: 6, label: '凌晨' },
    { from: 6, to: 9, label: '早上' },
    { from: 9, to: 12, label: '上午' },
    { from: 12, to: 14, label: '中午' },
    { from: 14, to: 18, label: '下午' },
    { from: 18, to: 19, label: '傍晚' },
    { from: 19, to: 24, label: '晚上' }
  ]

  for (let period of periods) {
    if (hours >= period.from && hours < period.to) {
      return period.label
    }
  }
  return ''
}

// 计算倒计时
const calculateCountdown = () => {
  const now = new Date()
  const currentHours = now.getHours()
  const currentMinutes = now.getMinutes()
  
  let targetTime
  let periodName
  
  // 获取当前时间段的结束时间
  const currentPeriod = getCurrentPeriod(currentHours, currentMinutes)
  
  if (currentPeriod === 'morning') {
    const endTime = parseTime(workSchedule.value.morning.end)
    targetTime = new Date(now)
    targetTime.setHours(endTime.getHours(), endTime.getMinutes(), 0, 0)
    periodName = '下班'
  } else if (currentPeriod === 'afternoon') {
    const endTime = parseTime(workSchedule.value.afternoon.end)
    targetTime = new Date(now)
    targetTime.setHours(endTime.getHours(), endTime.getMinutes(), 0, 0)
    periodName = '下班'
  } else if (currentPeriod === 'evening') {
    const endTime = parseTime(workSchedule.value.evening.end)
    targetTime = new Date(now)
    targetTime.setHours(endTime.getHours(), endTime.getMinutes(), 0, 0)
    periodName = '休息'
  } else {
    // 已经过了工作时间，计算到第二天的上班时间
    const tomorrow = new Date(now)
    tomorrow.setDate(tomorrow.getDate() + 1)
    const startTime = parseTime(workSchedule.value.morning.start)
    tomorrow.setHours(startTime.getHours(), startTime.getMinutes(), 0, 0)
    targetTime = tomorrow
    periodName = '上班'
  }
  
  const diff = targetTime - now
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  const seconds = Math.floor((diff % (1000 * 60)) / 1000)
  
  return { hours, minutes, seconds, periodName }
}

// 计算工作进度
const calculateProgress = () => {
  if (currentPeriod.value === 'rest') {
    progressPercentage.value = 0
    elapsedTime.value = '0h 0m'
    remainingTime.value = '0h 0m'
    return
  }
  
  const now = new Date()
  const currentHours = now.getHours()
  const currentMinutes = now.getMinutes()
  
  let startTime, endTime, totalDuration
  
  if (currentPeriod.value === 'morning') {
    startTime = parseTime(workSchedule.value.morning.start)
    endTime = parseTime(workSchedule.value.morning.end)
  } else if (currentPeriod.value === 'afternoon') {
    startTime = parseTime(workSchedule.value.afternoon.start)
    endTime = parseTime(workSchedule.value.afternoon.end)
  } else if (currentPeriod.value === 'evening') {
    startTime = parseTime(workSchedule.value.evening.start)
    endTime = parseTime(workSchedule.value.evening.end)
  }
  
  if (startTime && endTime) {
    // 计算总时长
    let totalMinutes = (endTime.getHours() * 60 + endTime.getMinutes()) - (startTime.getHours() * 60 + startTime.getMinutes())
    if (totalMinutes < 0) totalMinutes += 24 * 60 // 跨天处理
    const totalHours =Math.floor(totalMinutes / 60)
    const totalMins =totalMinutes% 60
    totalTime.value = `${totalHours}h ${totalMins}m`

    // 计算已过时间
    let elapsedMinutes = (currentHours * 60 + currentMinutes) - (startTime.getHours() * 60 + startTime.getMinutes())
    if (elapsedMinutes < 0) elapsedMinutes += 24 * 60 // 跨天处理
    
    // 计算进度百分比
    const progress = Math.min(Math.max((elapsedMinutes / totalMinutes) * 100, 0), 100)
    progressPercentage.value = Math.round(progress)
    
    // 格式化已过时间和剩余时间
    const elapsedHours = Math.floor(elapsedMinutes / 60)
    const elapsedMins = elapsedMinutes % 60
    elapsedTime.value = `${elapsedHours}h ${elapsedMins}m`
    
    const remainingMinutes = totalMinutes - elapsedMinutes
    const remainingHours = Math.floor(remainingMinutes / 60)
    const remainingMins = remainingMinutes % 60
    
    remainingTime.value = `${remainingHours}h ${remainingMins}m`
    
  }
}

// 刷新倒计时
const refreshCountdown = () => {
  updateDisplay()
  ElMessage.success('倒计时已刷新')
}

// 更新时间显示
const updateDisplay = () => {
  currentTime.value = new Date()
  const hours = currentTime.value.getHours()
  const minutes = currentTime.value.getMinutes()
  
  // 更新当前时间段
  currentPeriod.value = getCurrentPeriod(hours, minutes)
  
  // 更新欢迎信息
  const period = getPeriodOfDay(hours)
  
  if (currentPeriod.value === 'rest') {
    // 休息时间
    welcomeMessage.value = `${period}好！`
    countdownMessage.value = '现在是休息时间，好好享受吧！'
    
    // 休息时间不显示倒计时和进度
    countdownData.value = { hours: 0, minutes: 0, seconds: 0 }
    progressPercentage.value = 0
    elapsedTime.value = ''
    remainingTime.value = ''
  } else {
    // 工作时间
    welcomeMessage.value = `${period}好，working人！`
    
    // 更新倒计时数据
    const countdown = calculateCountdown()
    countdownData.value = {
      hours: countdown.hours,
      minutes: countdown.minutes,
      seconds: countdown.seconds
    }
    
    // 计算工作进度
    calculateProgress()
    
    countdownMessage.value = `现在距离${countdown.periodName}时间，仅剩：${countdown.hours}小时 ${countdown.minutes}分 ${countdown.seconds}秒，且行且珍惜。`
  }
}

// 计算属性
const currentDateTime = computed(() => {
  const now = currentTime.value
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const weekday = weekdays[now.getDay()]
  return `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(2, '0')}月${String(now.getDate()).padStart(2, '0')}日 ${weekday}`
})

const morningTime = computed(() => {
  const period = workSchedule.value.morning
  const isActive = currentPeriod.value === 'morning'
  const duration = calculateDuration(period.start, period.end)
  return `${formatTime(period.start)} - ${formatTime(period.end)} ${isActive ? '(进行中)' : `(${duration})`}`
})

const afternoonTime = computed(() => {
  const period = workSchedule.value.afternoon
  const isActive = currentPeriod.value === 'afternoon'
  const duration = calculateDuration(period.start, period.end)
  return `${formatTime(period.start)} - ${formatTime(period.end)} ${isActive ? '(进行中)' : `(${duration})`}`
})

const eveningTime = computed(() => {
  const period = workSchedule.value.evening
  const isActive = currentPeriod.value === 'evening'
  const duration = calculateDuration(period.start, period.end)
  return `${formatTime(period.start)} - ${formatTime(period.end)} ${isActive ? '(进行中)' : `(${duration})`}`
})

// 时间格式转换函数
const formatTime = (time) => {
  if (time instanceof Date) {
    return `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}`
  }
  return time
}

const parseTime = (timeString) => {
  if (timeString instanceof Date) {
    return timeString
  }
  const [hours, minutes] = timeString.split(':').map(Number)
  const date = new Date()
  date.setHours(hours, minutes, 0, 0)
  return date
}

// 计算持续时间
const calculateDuration = (start, end) => {
  const startTime = parseTime(start)
  const endTime = parseTime(end)
  const now = new Date()
  
  let totalMinutes = (endTime.getHours() * 60 + endTime.getMinutes()) - (startTime.getHours() * 60 + startTime.getMinutes())
  if (totalMinutes < 0) totalMinutes += 24 * 60 // 跨天处理
  
  // 检查时间段是否已经结束
  const currentTime = now.getHours() * 60 + now.getMinutes()
  const endTimeMinutes = endTime.getHours() * 60 + endTime.getMinutes()
  
  // 如果当前时间已经超过了结束时间，显示0h
  if (currentTime > endTimeMinutes) {
    return '0h'
  }
  
  const hours = Math.floor(totalMinutes / 60)
  const minutes = totalMinutes % 60
  
  if (minutes === 0) {
    return `${hours}h`
  } else {
    return `${hours}.${Math.round(minutes / 60 * 10)}h`
  }
}

// 保存设置到localStorage
const saveSettings = () => {
  try {
    const settings = {
      workSchedule: workSchedule.value
    }
    localStorage.setItem('workModuleSettings', JSON.stringify(settings))
    ElMessage.success('设置已保存')
  } catch (error) {
    ElMessage.error('保存设置失败')
    console.error('保存设置失败:', error)
  }
}

// 从localStorage加载设置
const loadSettings = () => {
  try {
    const savedSettings = localStorage.getItem('workModuleSettings')
    if (savedSettings) {
      const settings = JSON.parse(savedSettings)
      workSchedule.value = settings.workSchedule || defaultWorkSchedule
    }
  } catch (error) {
    console.error('加载设置失败:', error)
    // 如果加载失败，使用默认设置
    workSchedule.value = JSON.parse(JSON.stringify(defaultWorkSchedule))
  }
  // 初始化时间选择器
  initTimePickers()
}

// 加载预设配置
const loadPreset = (presetType) => {
  switch (presetType) {
    case 'standard':
      workSchedule.value = {
        morning: { start: '07:30', end: '11:30', duration: '4h' },
        afternoon: { start: '14:00', end: '17:30', duration: '3.5h' },
        evening: { start: '19:00', end: '22:30', duration: '3.5h' }
      }
      break
    case 'flexible':
      workSchedule.value = {
        morning: { start: '08:00', end: '11:30', duration: '3.5h' },
        afternoon: { start: '14:00', end: '17:30', duration: '3.5h' },
        evening: { start: '19:00', end: '22:00', duration: '3h' }
      }
      break
    // case 'night':
    //   workSchedule.value = {
    //     morning: { start: '22:00', end: '06:00', duration: '8h' },
    //     afternoon: { start: '14:00', end: '18:00', duration: '4h' },
    //     evening: { start: '19:00', end: '21:00', duration: '2h' }
    //   }
    //   break
  }
  saveSettings()
  initTimePickers()
  ElMessage.success(`已加载${presetType === 'standard' ? '标准' : presetType === 'flexible' ? '弹性' : '夜班'}工作时间`)
}

// 重置为默认设置
const resetToDefault = () => {
  workSchedule.value = JSON.parse(JSON.stringify(defaultWorkSchedule))
  initTimePickers()
  saveSettings()
  ElMessage.success('已重置为默认设置')
}

// 初始化时间选择器
const initTimePickers = () => {
  // 将字符串时间转换为Date对象
  timePickers.value.morning.start = parseTime(workSchedule.value.morning.start)
  timePickers.value.morning.end = parseTime(workSchedule.value.morning.end)
  timePickers.value.afternoon.start = parseTime(workSchedule.value.afternoon.start)
  timePickers.value.afternoon.end = parseTime(workSchedule.value.afternoon.end)
  timePickers.value.evening.start = parseTime(workSchedule.value.evening.start)
  timePickers.value.evening.end = parseTime(workSchedule.value.evening.end)
}

// 时间变更处理函数
const onTimeChange = (period, type) => {
  const timeValue = timePickers.value[period][type]
  if (timeValue) {
    const timeString = formatTime(timeValue)
    workSchedule.value[period][type] = timeString
    saveSettings()
  }
}

// 加载自定义预设
const loadCustomPreset = (presetId) => {
  // console.log('加载预设，ID:', presetId, '类型:', typeof presetId)
  // console.log('当前预设列表:', customPresets.value)
  
  const preset = Object.values(customPresets.value).find(p => p.id === presetId)
  // console.log('找到的预设:', preset)
  
  if (preset) {
    workSchedule.value = {
      morning: { start: preset.morning_start, end: preset.morning_end, duration: '' },
      afternoon: { start: preset.afternoon_start, end: preset.afternoon_end, duration: '' },
      evening: { start: preset.evening_start, end: preset.evening_end, duration: '' }
    }
    saveSettings()
    initTimePickers()
    ElMessage.success(`已加载预设：${preset.name}`)
  } else {
    console.error('未找到预设，ID:', presetId)
    ElMessage.error('加载预设失败：未找到预设')
  }
}

// 编辑自定义预设
const editCustomPreset = (presetId) => {
  // console.log('编辑预设，ID:', presetId, '类型:', typeof presetId)
  // console.log('当前预设列表:', customPresets.value)
  
  const preset = Object.values(customPresets.value).find(p => p.id === presetId)
  // console.log('找到的预设:', preset)
  
  if (preset) {
    editingPreset.value = presetId
    newPreset.value = {
      id: preset.id,
      name: preset.name,
      morning: { 
        start: parseTime(preset.morning_start), 
        end: parseTime(preset.morning_end) 
      },
      afternoon: { 
        start: parseTime(preset.afternoon_start), 
        end: parseTime(preset.afternoon_end) 
      },
      evening: { 
        start: parseTime(preset.evening_start), 
        end: parseTime(preset.evening_end) 
      }
    }
    showAddPreset.value = true
  } else {
    console.error('未找到预设，ID:', presetId)
    ElMessage.error('编辑预设失败：未找到预设')
  }
}

// 删除自定义预设
const deleteCustomPreset = (presetId) => {
  // console.log('删除预设，ID:', presetId, '类型:', typeof presetId)
  // console.log('当前预设列表:', customPresets.value)
  
  const preset = Object.values(customPresets.value).find(p => p.id === presetId)
  // console.log('找到的预设:', preset)
  
  if (preset && confirm(`确定要删除预设"${preset.name}"吗？`)) {
    // 调用API删除预设
    request.delete(`/work-presets/${presetId}`)
      .then(() => {
        delete customPresets.value[presetId]
        ElMessage.success('预设已删除')
      })
      .catch(error => {
        console.error('删除预设失败:', error)
        ElMessage.error('删除预设失败')
      })
  } else if (!preset) {
    console.error('未找到预设，ID:', presetId)
    ElMessage.error('删除预设失败：未找到预设')
  }
}

// 保存自定义预设
const saveCustomPreset = () => {
  if (!newPreset.value.name.trim()) {
    ElMessage.error('请输入预设名称')
    return
  }
  
  // 验证时间设置
  if (!newPreset.value.morning.start || !newPreset.value.morning.end ||
      !newPreset.value.afternoon.start || !newPreset.value.afternoon.end ||
      !newPreset.value.evening.start || !newPreset.value.evening.end) {
    ElMessage.error('请完整设置所有时间段')
    return
  }
  
  const presetData = {
    name: newPreset.value.name.trim(),
    morning_start: formatTime(newPreset.value.morning.start),
    morning_end: formatTime(newPreset.value.morning.end),
    afternoon_start: formatTime(newPreset.value.afternoon.start),
    afternoon_end: formatTime(newPreset.value.afternoon.end),
    evening_start: formatTime(newPreset.value.evening.start),
    evening_end: formatTime(newPreset.value.evening.end)
  }
  
  if (editingPreset.value) {
    // 编辑模式 - 调用API更新
    request.put(`/work-presets/${editingPreset.value}`, presetData)
      .then(() => {
        // 更新本地数据
        const preset = Object.values(customPresets.value).find(p => p.id === editingPreset.value)
        if (preset) {
          Object.assign(preset, presetData)
        }
        ElMessage.success('预设已更新')
        showAddPreset.value = false
        editingPreset.value = null
        resetNewPresetForm()
      })
      .catch(error => {
        console.error('更新预设失败:', error)
        ElMessage.error('更新预设失败')
      })
  } else {
    // 新增模式 - 调用API创建
    request.post('/work-presets', presetData)
      .then(response => {
        // 调试：打印响应结构
        // console.log('API响应:', response)
        
        // 添加到本地数据
        const preset = response.data || response
        // console.log('处理后的数据:', preset)
        
        if (preset.preset && preset.preset.id) {
          customPresets.value[preset.preset.id] = preset.preset
          ElMessage.success('预设已添加')
          showAddPreset.value = false
          resetNewPresetForm()
        } else {
          console.error('响应数据结构不正确:', preset)
          ElMessage.error('创建预设失败：响应数据格式错误')
        }
      })
      .catch(error => {
        console.error('创建预设失败:', error)
        ElMessage.error('创建预设失败')
      })
  }
}

// 重置新预设表单
const resetNewPresetForm = () => {
  newPreset.value = {
    id: null,
    name: '',
    morning: { start: null, end: null },
    afternoon: { start: null, end: null },
    evening: { start: null, end: null }
  }
}

// 从API加载自定义预设
const loadCustomPresets = () => {
  // console.log('开始加载自定义预设...')
  request.get('/work-presets')
    .then(response => {
      // 调试：打印响应结构
      // console.log('加载预设API响应:', response)
      
      // 将数组转换为以id为key的对象
      const presets = {}
      const data = response.data || response
      // console.log('处理后的数据:', data)
      
      if (data.presets && Array.isArray(data.presets)) {
        data.presets.forEach(preset => {
          // console.log('处理预设:', preset)
          presets[preset.id] = preset
        })
        customPresets.value = presets
        // console.log('最终加载的预设:', customPresets.value)
        // console.log('预设数量:', Object.keys(customPresets.value).length)
      } else {
        console.error('响应数据结构不正确:', data)
        customPresets.value = {}
      }
    })
    .catch(error => {
      console.error('加载自定义预设失败:', error)
      customPresets.value = {}
    })
}

// 预设对话框关闭处理
const onPresetDialogClose = () => {
  editingPreset.value = null
  resetNewPresetForm()
}

// 定时器
let timer

onMounted(() => {
  fetchSaying()  //获取言语
  loadSettings() // 加载保存的设置
  loadCustomPresets() // 加载自定义预设
  updateDisplay()
  timer = setInterval(updateDisplay, 1000)
  
  // 初始化手机端检测
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
  
  // 移除事件监听器
  window.removeEventListener('resize', checkMobile)
})

// 获取工作时间安排项的CSS类
const getScheduleItemClass = (period) => {
  const status = getPeriodStatus(period)
  if (status === 'ongoing') return 'schedule-item ongoing'
  if (status === 'completed') return 'schedule-item completed'
  if (status === 'upcoming') return 'schedule-item upcoming'
  return 'schedule-item'
}

// 获取时间显示的CSS类
const getTimeClass = (period) => {
  const status = getPeriodStatus(period)
  if (status === 'ongoing') return 'schedule-time ongoing'
  if (status === 'completed') return 'schedule-time completed'
  if (status === 'upcoming') return 'schedule-time upcoming'
  return 'schedule-time'
}

// 获取状态显示的CSS类
const getStatusClass = (period) => {
  const status = getPeriodStatus(period)
  if (status === 'ongoing') return 'schedule-status ongoing'
  if (status === 'completed') return 'schedule-status completed'
  if (status === 'upcoming') return 'schedule-status upcoming'
  return 'schedule-status'
}

// 获取时间段状态
const getPeriodStatus = (period) => {
  const now = new Date()
  const currentHours = now.getHours()
  const currentMinutes = now.getMinutes()
  const currentTime = currentHours * 60 + currentMinutes
  
  if (period === 'morning') {
    const startTime = parseTime(workSchedule.value.morning.start)
    const endTime = parseTime(workSchedule.value.morning.end)
    const startMinutes = startTime.getHours() * 60 + startTime.getMinutes()
    const endMinutes = endTime.getHours() * 60 + endTime.getMinutes()
    
    if (currentTime < startMinutes) return 'upcoming'
    if (currentTime >= startMinutes && currentTime < endMinutes) return 'ongoing'
    return 'completed'
  } else if (period === 'afternoon') {
    const startTime = parseTime(workSchedule.value.afternoon.start)
    const endTime = parseTime(workSchedule.value.afternoon.end)
    const startMinutes = startTime.getHours() * 60 + startTime.getMinutes()
    const endMinutes = endTime.getHours() * 60 + endTime.getMinutes()
    
    if (currentTime < startMinutes) return 'upcoming'
    if (currentTime >= startMinutes && currentTime < endMinutes) return 'ongoing'
    return 'completed'
  } else if (period === 'evening') {
    const startTime = parseTime(workSchedule.value.evening.start)
    const endTime = parseTime(workSchedule.value.evening.end)
    const startMinutes = startTime.getHours() * 60 + startTime.getMinutes()
    const endMinutes = endTime.getHours() * 60 + endTime.getMinutes()
    
    if (currentTime < startMinutes) return 'upcoming'
    if (currentTime >= startMinutes && currentTime < endMinutes) return 'ongoing'
    return 'completed'
  }
  return 'unknown'
}


// 获取工作时间显示文本（拆分版）
const getScheduleTime1 = (period) => {
  // 获取当前时间（用于判断时间段状态）
  const now = new Date();
  const currentHours = now.getHours(); // 当前小时
  const currentMinutes = now.getMinutes(); // 当前分钟
  const currentTotalMinutes = currentHours * 60 + currentMinutes; // 当前时间总分钟数（当天0点起）

  // 获取目标时间段的起止时间字符串
  let startTimeStr, endTimeStr;
  if (period === 'morning') {
    startTimeStr = workSchedule.value.morning.start;
    endTimeStr = workSchedule.value.morning.end;
  } else if (period === 'afternoon') {
    startTimeStr = workSchedule.value.afternoon.start;
    endTimeStr = workSchedule.value.afternoon.end;
  } else if (period === 'evening') {
    startTimeStr = workSchedule.value.evening.start;
    endTimeStr = workSchedule.value.evening.end;
  }

  // 解析起止时间为小时和分钟（如 "07:30" → 7, 30）
  const [startHour, startMin] = startTimeStr.split(':').map(Number);
  const [endHour, endMin] = endTimeStr.split(':').map(Number);

  // 计算起止时间的总分钟数（当天0点起）
  const startTotalMinutes = startHour * 60 + startMin;
  const endTotalMinutes = endHour * 60 + endMin;

  // 判断是否跨天（如 22:00-06:00，结束时间总分钟数 < 开始时间总分钟数）
  const isCrossDay = endTotalMinutes < startTotalMinutes;

  // 计算时长显示文本
  let duration;
  if (
    // 场景1：时间段已结束
    (!isCrossDay && currentTotalMinutes >= endTotalMinutes) || // 非跨天，当前时间过了结束时间
    (isCrossDay && currentTotalMinutes >= endTotalMinutes && currentTotalMinutes < startTotalMinutes) // 跨天，当前时间在结束时间之后但在开始时间之前
  ) {
    duration = '0h'; // 已过去，显示 0h
  } else if (
    // 场景2：时间段进行中
    (!isCrossDay && currentTotalMinutes >= startTotalMinutes && currentTotalMinutes < endTotalMinutes) || // 非跨天，在时间段内
    (isCrossDay && (currentTotalMinutes >= startTotalMinutes || currentTotalMinutes < endTotalMinutes))   // 跨天，在时间段内（如 22:00-06:00，当前23点或凌晨3点）
  ) {
    duration = 'ing'; // 进行中，显示 ing
  } else {
    // 场景3：时间段未开始，计算距离开始的时间差
    // let diffMinutes;
    
    // if (isCrossDay) {
    //   // 跨天时间段的情况
    //   if (currentTotalMinutes >= startTotalMinutes) {
    //     // 当前时间在开始时间之后（如当前23点，开始时间22点）→ 需要等到明天的开始时间
    //     diffMinutes = (startTotalMinutes + 24 * 60) - currentTotalMinutes;
    //   } else if (currentTotalMinutes < endTotalMinutes) {
    //     // 当前时间在结束时间之前（如当前5点，开始时间22点）→ 需要等到今天的开始时间
    //     diffMinutes = startTotalMinutes - currentTotalMinutes;
    //   } else {
    //     // 当前时间在结束时间之后但在开始时间之前（如当前8点，开始时间22点）→ 需要等到今天的开始时间
    //     diffMinutes = startTotalMinutes - currentTotalMinutes;
    //   }
    // } else {
    //   // 非跨天时间段的情况
    //   if (currentTotalMinutes < startTotalMinutes) {
    //     // 当天内开始（如当前10点，开始时间14点）
    //     diffMinutes = startTotalMinutes - currentTotalMinutes;
    //   } else {
    //     // 当前时间已过开始时间，但时间段未开始 → 需要等到明天的开始时间
    //     diffMinutes = (startTotalMinutes + 24 * 60) - currentTotalMinutes;
    //   }
    // }

    // // 格式化时差为 "XhYm" 或 "Ym"（如 1h30m、45m）
    // const hours = Math.floor(diffMinutes / 60);
    // const mins = diffMinutes % 60;
    // duration = hours > 0 
    //   ? `${hours}h${mins > 0 ? `${mins}m` : ''}`  // 有小时，如 2h 或 2h15m
    //   : `${mins}m`;                               // 无小时，如 30m    
    duration = calculateDuration(startTimeStr, endTimeStr)                             
  }

  // 格式化起止时间显示（补零，如 7:3 → 07:03）
  const formatTime = (num) => String(num).padStart(2, '0');
  const startTime = `${formatTime(startHour)}:${formatTime(startMin)}`;
  const endTime = `${formatTime(endHour)}:${formatTime(endMin)}`;

  // 返回拆分后的两个部分
  return {
    timeRange: `${startTime} - ${endTime}`,
    duration: `(${duration})`
  };
};

// 获取工作时间显示文本
const getScheduleTime = (period) => {
  // 使用实际的工作时间配置
  let startTime, endTime, duration
  
  if (period === 'morning') {
    startTime = formatTime(workSchedule.value.morning.start)
    endTime = formatTime(workSchedule.value.morning.end)
    duration = calculateDuration(workSchedule.value.morning.start, workSchedule.value.morning.end)
  } else if (period === 'afternoon') {
    startTime = formatTime(workSchedule.value.afternoon.start)
    endTime = formatTime(workSchedule.value.afternoon.end)
    duration = calculateDuration(workSchedule.value.afternoon.start, workSchedule.value.afternoon.end)
  } else if (period === 'evening') {
    startTime = formatTime(workSchedule.value.evening.start)
    endTime = formatTime(workSchedule.value.evening.end)
    duration = calculateDuration(workSchedule.value.evening.start, workSchedule.value.evening.end)
  }
  
  return `${startTime} - ${endTime} (${duration})`
}

// 获取状态显示文本
const getScheduleStatus = (period) => {
  const status = getPeriodStatus(period)
  if (status === 'ongoing') return '进行中'
  if (status === 'completed') return '已完成'
  if (status === 'upcoming') return '待开始'
  return ''
}
</script>

<style scoped>
.work-container {
  min-height: 100vh;
  background: 
    linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%),
    url('/api/getBaiduImage') center/cover no-repeat;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(0px);
}

/* 深色主题下的平滑过渡 */
.dark-theme .work-container {
  background: 
    linear-gradient(135deg, rgba(26, 26, 46, 0.1) 0%, rgba(22, 33, 62, 0.1) 100%),
    url('/api/getBaiduImage') center/cover no-repeat;
  backdrop-filter: blur(0px);
}

/* 深色主题下的背景装饰动画 */
.dark-theme .bg-circle {
  animation: floatDark 8s ease-in-out infinite;
}

@keyframes floatDark {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.05;
  }
  50% { 
    transform: translateY(-15px) scale(1.05);
    opacity: 0.08;
  }
}


.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: float 6s ease-in-out infinite;
  transition: background 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* 深色主题下的背景装饰 */
.dark-theme .bg-circle {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.05);
}

.bg-circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.bg-circle-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.bg-circle-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.header {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 深色主题下的头部样式 */
.dark-theme .header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

/* 返回按钮样式 */
.back-btn {
  color: white;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

/* 深色主题下的按钮样式 */
.dark-theme .back-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.back-btn .btn-text {
  margin-left: 6px;
  font-weight: 500;
}

/* 标题区域样式 */
.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.title-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  animation: float 3s ease-in-out infinite;
}

.title-section h1 {
  color: white;
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.title-decoration {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* 设置按钮样式 */
.settings-btn {
  color: white;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

/* 深色主题下的设置按钮样式 */
.dark-theme .settings-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.settings-btn .btn-text {
  margin-left: 6px;
  font-weight: 500;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.main {
  padding: 10px;
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(3px);
  border-radius: 0;
  min-height: calc(100vh - 60px);
}

.countdown-card {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  padding: 15px;
  /* margin-bottom: 10px; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: center;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  margin-left: auto;
  margin-right: auto;
  /* max-width: 600px; */
  width: 90%;
}

/* 深色主题下的倒计时卡片 */
.dark-theme .countdown-card {
  background: rgba(45, 45, 45, 0.75);
  margin-left: auto;
  margin-right: auto;
  /* max-width: 600px; */
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.welcome-section h2 {
  color: #333;
  margin: 10px 0 10px 0; /* 大幅减少上边距 */
  font-size: 24px;
  font-weight: 600;
  transition: color 0.3s ease;
}
.welcome-section-rest h2 {
  margin: 20px 0 10px 0; /* 大幅减少上边距 */

}

/* 深色主题下的欢迎信息 */
.dark-theme .welcome-section h2 {
  color: #ffffff;
}
.welcome-section-rest {
   margin-top: 230px;
  
}
.countdown-display {
  color: #667eea;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
}

/* 增强倒计时样式 */
.countdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  /* margin-bottom: 5px; */
  border-bottom: 2px solid #f0f8ff;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.countdown-header h3 {
  margin: 0;
  color: #333;
  font-size: 22px;
  font-weight: 600;
  transition: color 0.3s ease;
}

/* 深色主题下的倒计时标题 */
.dark-theme .countdown-header h3 {
  color: #ffffff;
}

.current-time-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-display {
  font-size: 18px;
  font-weight: 600;
  color: #667eea;
  font-family: 'Courier New', monospace;
}

.date-display {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* 深色主题下的日期显示 */
.dark-theme .date-display {
  color: #b0b0b0;
}

.period-badge {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.period-badge.morning {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.period-badge.afternoon {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.period-badge.evening {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.period-badge.rest {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.countdown-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  /* margin-bottom: 25px; */
   margin-top: 6px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 20px;
  border: 2px solid #e9ecef;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* 深色主题下的倒计时时间显示 */
.dark-theme .countdown-time {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border-color: #404040;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.time-value {
  font-size: 48px;
  font-weight: 700;
  color: #667eea;
  text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
  min-width: 80px;
  text-align: center;
}

.time-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* 深色主题下的时间标签 */
.dark-theme .time-label {
  color: #b0b0b0;
}

.time-separator {
  font-size: 36px;
  color: #667eea;
  font-weight: 700;
  margin-top: -10px;
}

.countdown-message {
  text-align: center;
  margin-bottom: 25px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f0ff 100%);
  border-radius: 15px;
  border: 1px solid #e1f0ff;
  color: #409eff;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

/* 进度条样式 */
.progress-section {
  margin-top: 25px;
  padding: 20px;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 深色主题下的进度条区域 */
.dark-theme .progress-section {
  background: #2a2a2a;
  border-color: #404040;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
  transition: color 0.3s ease;
}

/* 深色主题下的进度信息 */
.dark-theme .progress-info {
  color: #b0b0b0;
}

.progress-percentage {
  font-weight: 600;
  color: #667eea;
  font-size: 16px;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.progress-details {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
  transition: color 0.3s ease;
}

/* 深色主题下的进度详情 */
.dark-theme .progress-details {
  color: #b0b0b0;
}

/* 快速操作按钮 */
.quick-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
  flex-wrap: wrap;
}

.action-btn {
  min-width: 160px;
  height: 48px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 手机端倒计时优化 */
@media (max-width: 768px) {
  .countdown-header {
    flex-direction: column; /* 改为垂直显示，更清晰 */
    gap: 12px;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
  }
  
  .header-left {
    gap: 8px;
    align-items: center;
    text-align: center;
  }
  
  .countdown-header h3 {
    font-size: 20px;
    margin: 0;
    text-align: center;
  }
  
  .current-time-info {
    gap: 4px;
    align-items: center;
    text-align: center;
  }
  
  .time-display {
    font-size: 18px;
    display: block;
  }
  
  .date-display {
    font-size: 13px;
    display: block;
  }
  
  .period-badge {
    font-size: 13px;
    padding: 8px 16px;
    flex-shrink: 0;
    margin-top: 5px;
  }
  
  .countdown-time {
    flex-direction: row; /* 保持水平显示 */
    gap: 8px; /* 适当间距 */
    padding: 20px 15px; /* 增加内边距，让内容更舒适 */
    border-radius: 18px;
    flex-wrap: nowrap; /* 防止换行 */
    overflow-x: auto; /* 如果内容过宽允许滚动 */
    margin-bottom: 25px; /* 增加底部间距 */
    margin-top: 6px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); /* 增强阴影效果 */
  }
  
  .time-unit {
    flex: 1; /* 平均分配空间 */
    min-width: 55px; /* 增加最小宽度 */
    max-width: 75px; /* 增加最大宽度 */
    gap: 6px; /* 增加内部间距 */
  }
  
  .time-value {
    font-size: 32px; /* 增加字体大小，提高可读性 */
    min-width: 45px; /* 增加最小宽度 */
    line-height: 1.1; /* 适当增加行高 */
    font-weight: 700; /* 增加字重 */
  }
  
  .time-separator {
    font-size: 24px; /* 增加分隔符大小 */
    margin: 0;
    align-self: center; /* 垂直居中 */
    flex-shrink: 0; /* 防止分隔符被压缩 */
    color: #667eea; /* 保持颜色 */
    font-weight: 700; /* 增加字重 */
  }
  
  .time-label {
    font-size: 11px; /* 增加标签字体大小 */
    line-height: 1.2;
    color: #666;
    font-weight: 500; /* 增加字重 */
  }
  
  .countdown-message {
    font-size: 13px;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
  }
  
  .progress-section {
    padding: 15px;
    border-radius: 12px;
    margin-top: 20px;
  }
  
  .progress-info {
    font-size: 12px;
  }
  
  .progress-percentage {
    font-size: 14px;
  }
  
  .progress-details {
    font-size: 11px;
    flex-direction: row; /* 改为水平显示 */
    gap: 15px; /* 增加间距 */
    text-align: center;
    justify-content: space-between; /* 两端对齐 */
  }
  
  .quick-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
  }
  
  .action-btn {
    width: 100%;
    max-width: 260px;
    height: 42px;
    font-size: 13px;
  }
  
  /* 休息时间手机端优化 */
  .rest-time-display {
    padding: 18px 12px;
    border-radius: 15px;
    margin-bottom: 20px;
  }
  
  .rest-icon {
    font-size: 42px;
    margin-bottom: 10px;
  }
  
  .rest-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .rest-message {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .next-work-info {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 18px;
  }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
  .header-content {
    padding: 0 12px;
  }
  
  .title-icon {
    font-size: 24px;
  }
  
  .title-section h1 {
    font-size: 20px;
    letter-spacing: 0.3px;
  }
  
  .title-decoration {
    width: 30px;
    height: 2px;
  }
  
  .back-btn,
  .settings-btn {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    min-height: 28px;
  }
  
  .back-btn .btn-text,
  .settings-btn .btn-text {
    margin-left: 2px;
    font-size: 11px;
  }
  
  .countdown-header {
    flex-direction: column; /* 保持垂直显示 */
    gap: 10px;
    padding: 0 8px;
  }
  
  .header-left {
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  
  .countdown-header h3 {
    font-size: 18px;
    margin: 0;
    text-align: center;
  }
  
  .time-display {
    font-size: 16px;
    display: block;
  }
  
  .date-display {
    font-size: 12px;
    display: block;
  }
  
  .period-badge {
    font-size: 12px;
    padding: 6px 14px;
    flex-shrink: 0;
    margin-top: 4px;
  }
  
  .countdown-time {
    padding: 16px 12px;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 20px;
    border-radius: 16px;
  }
  
  .time-unit {
    min-width: 50px;
    max-width: 65px;
    gap: 4px;
  }
  
  .time-value {
    font-size: 28px;
    min-width: 40px;
    font-weight: 700;
  }
  
  .time-separator {
    font-size: 20px;
    font-weight: 700;
  }
  
  .time-label {
    font-size: 10px;
    font-weight: 500;
  }
  
  .countdown-message {
    font-size: 12px;
    padding: 12px;
    margin-bottom: 15px;
  }
  
  .progress-section {
    padding: 12px;
    margin-top: 15px;
  }
  
  .progress-details {
    flex-direction: row; /* 保持水平显示 */
    gap: 10px; /* 减少间距 */
    font-size: 10px;
  }
  
  .rest-time-display {
    padding: 15px 10px;
    margin-bottom: 15px;
  }
  
  .rest-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }
  
  .rest-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .rest-message {
    font-size: 13px;
    margin-bottom: 10px;
  }
}

/* 中等屏幕优化 */
@media (min-width: 376px) and (max-width: 480px) {
  .header-content {
    padding: 0 12px;
  }
  
  .back-btn,
  .settings-btn {
    padding: 4px 9px;
    font-size: 12px;
    border-radius: 7px;
    min-height: 30px;
  }
  
  .back-btn .btn-text,
  .settings-btn .btn-text {
    margin-left: 3px;
    font-size: 11px;
  }
  
  /* 中等屏幕按钮图标优化 */
  .back-btn .el-icon,
  .settings-btn .el-icon {
    font-size: 13px;
  }
  
  /* 超小屏幕按钮图标优化 */
  .back-btn .el-icon,
  .settings-btn .el-icon {
    font-size: 12px;
  }
  
  .countdown-header {
    flex-direction: column; /* 改为垂直显示 */
    gap: 10px;
    padding: 0 8px;
    justify-content: center;
    align-items: center;
  }
  
  .header-left {
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  
  .countdown-header h3 {
    font-size: 18px;
    margin: 0;
    text-align: center;
  }
  
  .time-display {
    font-size: 16px;
    display: block;
  }
  
  .date-display {
    font-size: 12px;
    display: block;
  }
  
  .period-badge {
    font-size: 12px;
    padding: 7px 12px;
    flex-shrink: 0;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  
  .countdown-time {
    padding: 18px 14px;
    gap: 7px;
     margin-top: 6px;
    margin-bottom: 22px;
    border-radius: 17px;
  }
  
  .time-unit {
    min-width: 52px;
    max-width: 70px;
    gap: 5px;
  }
  
  .time-value {
    font-size: 30px;
    min-width: 42px;
    font-weight: 700;
  }
  
  .time-separator {
    font-size: 22px;
    font-weight: 700;
  }
  
  .time-label {
    font-size: 11px;
    font-weight: 500;
  }
  
  .countdown-message {
    font-size: 12px;
    padding: 14px;
    margin-bottom: 18px;
  }
  
  .progress-section {
    padding: 14px;
    margin-top: 18px;
  }
  
  .progress-details {
    flex-direction: row; /* 保持水平显示 */
    gap: 12px; /* 适当间距 */
    font-size: 11px;
  }
  
  .rest-time-display {
    padding: 16px 12px;
    margin-bottom: 18px;
  }
  
  .rest-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }
  
  .rest-title {
    font-size: 19px;
    margin-bottom: 10px;
  }
  
  .rest-message {
    font-size: 13px;
    margin-bottom: 12px;
  }
}

/* 平板端优化 */
@media (min-width: 481px) and (max-width: 768px) {
  .header-content {
    padding: 0 14px;
  }
  
  .back-btn,
  .settings-btn {
    padding: 5px 11px;
    font-size: 13px;
    border-radius: 9px;
    min-height: 34px;
  }
  
  .back-btn .btn-text,
  .settings-btn .btn-text {
    margin-left: 4px;
    font-size: 12px;
  }
  
  /* 平板端按钮图标优化 */
  .back-btn .el-icon,
  .settings-btn .el-icon {
    font-size: 14px;
  }
  
  .countdown-header {
    flex-direction: column; /* 改为垂直显示 */
    gap: 12px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
  }
  
  .header-left {
    gap: 8px;
    align-items: center;
    text-align: center;
  }
  
  .countdown-header h3 {
    font-size: 20px;
    margin: 0;
    text-align: center;
  }
  
  .time-display {
    font-size: 18px;
    display: block;
  }
  
  .date-display {
    font-size: 14px;
    display: block;
  }
  
  .period-badge {
    font-size: 13px;
    padding: 8px 16px;
    flex-shrink: 0;
    margin-top: 5px;
  }
  
  .countdown-time {
    padding: 22px 18px;
    gap: 10px;
     margin-top: 6px;
    margin-bottom: 25px;
    border-radius: 19px;
  }
  
  .time-unit {
    min-width: 60px;
    max-width: 80px;
    gap: 6px;
  }
  
  .time-value {
    font-size: 36px;
    min-width: 50px;
    font-weight: 700;
  }
  
  .time-separator {
    font-size: 28px;
    font-weight: 700;
  }
  
  .time-label {
    font-size: 12px;
    font-weight: 500;
  }
  
  .countdown-message {
    font-size: 14px;
    padding: 16px;
    margin-bottom: 22px;
  }
  
  .progress-section {
    padding: 16px;
    margin-top: 22px;
  }
  
  .progress-details {
    flex-direction: row; /* 保持水平显示 */
    gap: 15px; /* 适当间距 */
    font-size: 12px;
  }
  
  .rest-time-display {
    padding: 20px 15px;
    margin-bottom: 22px;
  }
  
  .rest-icon {
    font-size: 46px;
    margin-bottom: 12px;
  }
  
  .rest-title {
    font-size: 21px;
    margin-bottom: 12px;
  }
  
  .rest-message {
    font-size: 15px;
    margin-bottom: 14px;
  }
}

/* 超宽屏幕优化（如折叠屏展开状态） */
@media (min-width: 769px) and (max-width: 1024px) {
  .countdown-time {
    gap: 12px;
    padding: 25px 20px;
  }
  
  .time-unit {
    min-width: 70px;
    max-width: 90px;
  }
  
  .time-value {
    font-size: 40px;
    min-width: 60px;
  }
  
  .time-separator {
    font-size: 30px;
  }
  
  .time-label {
    font-size: 13px;
  }
}

.work-time-card {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  /* padding: 30px; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.date-time-section,
.work-time-section {
  margin-bottom: 30px;
}

.date-time-section h3,
.work-time-section h3 {
  color: #333;
  margin: 0 0 15px 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-time-section p {
  color: #666;
  font-size: 18px;
  margin: 0;
}

.time-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.time-block {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.time-block.active {
  background: #e3f2fd;
  border-color: #2196f3;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
}

.time-label {
  display: block;
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}

.time-range {
  display: block;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}
::v-deep  .el-dialog {
  border-radius: 20px !important;
}



/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 15px;
  }
  
  .title-icon {
    font-size: 28px;
  }
  
  .title-section h1 {
    font-size: 22px;
    letter-spacing: 0.5px;
  }
  
  .title-decoration {
    width: 35px;
    height: 2px;
  }
  
  .back-btn,
  .settings-btn {
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 8px;
    min-height: 32px;
  }
  
  .back-btn .btn-text,
  .settings-btn .btn-text {
    margin-left: 3px;
    font-size: 12px;
  }
  
  /* 手机端按钮图标优化 */
  .back-btn .el-icon,
  .settings-btn .el-icon {
    font-size: 14px;
  }
  
  .main {
    padding: 15px;
  }
  
  .countdown-card,
  .work-time-card {
    /* padding: 20px; */
  }
  
  .time-blocks {
    grid-template-columns: 1fr;
  }
}

/* 手机端弹窗样式优化 */
.work-settings-dialog .el-dialog,
.preset-dialog .el-dialog {
  margin: 4px auto !important;
  border-radius: 12px;
  overflow: hidden;
}

.work-settings-dialog .el-dialog__body,
.preset-dialog .el-dialog__body {
  padding: 16px;
}

.work-settings-dialog .el-dialog__header,
.preset-dialog .el-dialog__header {
  padding: 16px 16px 0 16px;
  border-bottom: none;
}

.work-settings-dialog .el-dialog__title,
.preset-dialog .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 手机端时间段卡片样式 */
.time-period-card.mobile {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.time-period-card.mobile .period-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.time-period-card.mobile .period-icon {
  font-size: 28px;
}

.time-period-card.mobile .period-title {
  font-size: 16px;
}

.time-period-card.mobile .time-inputs-group {
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.time-period-card.mobile .time-input-item {
  min-width: auto;
  width: 100%;
  max-width: 200px;
  justify-content: center;
  flex: none;
}

.time-period-card.mobile .time-input-item .el-time-picker {
  width: 100%;
}

.time-period-card.mobile .time-input-item .el-time-picker .el-input__wrapper {
  height: 40px;
  border-radius: 8px;
}

.time-period-card.mobile .time-separator {
  padding: 8px 16px;
  font-size: 14px;
  margin: 8px 0;
  border-radius: 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 手机端时间设置项样式（保留兼容性） */
.time-setting-item.mobile {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.time-setting-item.mobile label {
  min-width: auto;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  display: block;
}

.time-setting-item.mobile .el-time-picker {
  width: 100%;
}

.time-setting-item.mobile .el-time-picker .el-input__wrapper {
  border-radius: 6px;
  height: 36px;
}

/* 手机端预设按钮样式 */
.preset-buttons.mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  width: 100%;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.preset-buttons.mobile .el-button {
  width: 100% !important;
  max-width: 300px;
  height: 44px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  text-align: center;
}

.preset-buttons.mobile .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.preset-buttons.mobile .el-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 手机端预设项样式 */
.preset-item.mobile {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.preset-item.mobile .preset-name {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  /* color: #333; */
  text-align: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
}

.preset-actions.mobile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.preset-actions.mobile .el-button {
  height: 36px;
  font-size: 11px;
  border-radius: 6px;
  margin: 0;
  min-width: 0;
}

/* 手机端时间输入样式 */
.time-inputs.mobile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.time-inputs.mobile .time-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 200px;
  flex: none;
}

.time-inputs.mobile .time-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-align: center;
  margin-top: 4px;
}

/* 移除手机端分隔符样式 */
.time-inputs.mobile .time-separator {
  display: none;
}

.time-inputs.mobile .el-time-picker {
  width: 100%;
  max-width: 200px;
}

.time-inputs.mobile .el-time-picker .el-input__wrapper {
  border-radius: 8px;
  height: 40px;
  border: 1px solid #dcdfe6;
  transition: all 0.2s ease;
}

.time-inputs.mobile .el-time-picker .el-input__wrapper:hover {
  border-color: #409eff;
}

.time-inputs.mobile .el-time-picker .el-input__wrapper:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 手机端对话框底部样式 */
.dialog-footer.mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
}

.dialog-footer.mobile .el-button {
  width: 100%;
  height: 40px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
}

/* 手机端设置内容滚动优化 */
@media (max-width: 768px) {
  .settings-content {
    max-height: 60vh;
    padding: 0;
  }
  
  .preset-form {
    max-height: 60vh;
    padding: 0;
  }
  
  .preset-form .form-item {
    margin-bottom: 16px;
    padding: 10px;
  }
  
  .preset-form .form-item label {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .setting-section {
    margin-bottom: 16px;
    padding: 12px;
  }
  
  .setting-section h4 {
    font-size: 15px;
    margin-bottom: 12px;
    text-align: center;
  }
  
  .setting-section h5 {
    font-size: 13px;
    text-align: center;
    margin-bottom: 12px;
  }
  
  .custom-presets {
    margin-top: 12px;
    padding-top: 12px;
  }
  
  .add-preset-section {
    text-align: center;
    margin-top: 12px;
  }
  
  .add-preset-section .el-button {
    width: 100%;
    height: 40px;
    font-size: 13px;
    border-radius: 8px;
  }
  
  .add-preset-section.mobile {
    display: flex;
    justify-content: center;
  }
  
  .add-preset-section.mobile .el-button {
    width: 100%;
    max-width: 280px;
    height: 40px;
    font-size: 13px;
    border-radius: 8px;
    justify-content: center;
  }
  
  /* 手机端触摸优化 */
  .el-button {
    min-height: 36px;
    touch-action: manipulation;
  }
  
  .el-time-picker {
    touch-action: manipulation;
  }
  
  /* 手机端时间选择器优化 */
  .el-time-picker .el-input__wrapper {
    min-height: 36px;
    touch-action: manipulation;
  }
  
  .el-time-picker .el-input__inner {
    font-size: 14px; /* 防止iOS缩放 */
  }
  
  /* 手机端滚动条优化 */
  .settings-content::-webkit-scrollbar,
  .preset-form::-webkit-scrollbar {
    width: 6px;
  }
  
  .settings-content::-webkit-scrollbar-track,
  .preset-form::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  .settings-content::-webkit-scrollbar-thumb,
  .preset-form::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  
  .settings-content::-webkit-scrollbar-thumb:hover,
  .preset-form::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  
  

 
}












/* 设置对话框样式 */
.settings-content {
  max-height: 60vh;
  overflow-y: auto;
}

.setting-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 深色主题下的设置区域 */
.dark-theme .setting-section {
  background: #2a2a2a;
  border-color: #404040;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.setting-section h4 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  transition: color 0.3s ease;
}

/* 深色主题下的设置标题 */
.dark-theme .setting-section h4 {
  color: #ffffff;
}

/* 手机端设置部分样式优化 */
@media (max-width: 768px) {
  .settings-content .setting-section {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
  }

  .welcome-section h2 {
  margin: 15px 0 20px 0; /* 减少移动端上边距 */
  }
 .welcome-section-rest h2 {
  margin: 20px 0 10px 0; /* 大幅减少上边距 */
}
  
  .settings-content .setting-section h4 {
    font-size: 16px;
    margin-bottom: 16px;
    color: #333;
    font-weight: 600;
  }
  
  /* 手机端快速预设区域特殊样式 */
  .settings-content .setting-section:has(.preset-buttons.mobile) {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e1f0ff;
  }
  
  .settings-content .setting-section:has(.preset-buttons.mobile) h4 {
    color: #409eff;
    font-size: 17px;
  }
}

.time-settings {
  display: grid;
  gap: 20px;
}

/* 时间段卡片样式 */
.time-period-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 深色主题下的时间段卡片 */
.dark-theme .time-period-card {
  background: #3a3a3a;
  border-color: #404040;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.time-period-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.period-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f8ff;
}

.period-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.period-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  transition: color 0.3s ease;
}

/* 深色主题下的时间段标题 */
.dark-theme .period-title {
  color: #ffffff;
}

.time-inputs-group {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 80px;
}

/* 移除分隔符相关样式，因为不再需要 */
.time-separator {
  display: none;
}

.time-input-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  flex: 1;
  max-width: 200px;
}

.time-input-item label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
  text-align: center;
  margin: 0;
  line-height: 1.2;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

/* 深色主题下的时间输入标签 */
.dark-theme .time-input-item label {
  color: #b0b0b0;
}

.time-input-item .el-time-picker {
  width: 140px;
}

.time-input-item .el-time-picker .el-input__wrapper {
  border-radius: 10px;
  height: 44px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.time-input-item .el-time-picker .el-input__wrapper:hover {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.time-input-item .el-time-picker .el-input__wrapper:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15);
}

.time-separator {
  color: #409eff;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f0ff 100%);
  border-radius: 25px;
  border: 2px solid #e1f0ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  margin: 0 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  box-sizing: border-box;
}

.time-setting-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.time-setting-item label {
  min-width: 120px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.preset-buttons .el-button {
  min-width: 120px;
  height: 44px;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 深色主题下的预设按钮 */
.dark-theme .preset-buttons .el-button {
  background-color: #3a3a3a;
  border-color: #404040;
  color: #ffffff;
}

/* 手机端预设按钮样式优化 */
@media (max-width: 768px) {
  .preset-buttons .el-button {
    min-width: 120px;
    height: 40px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
  .preset-buttons.mobile .el-button {
    max-width: 280px;
    height: 40px;
    font-size: 13px;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .preset-buttons.mobile {
    gap: 10px;
    margin-bottom: 16px;
  }
}

/* 中等屏幕优化 */
@media (min-width: 376px) and (max-width: 480px) {
  .preset-buttons.mobile .el-button {
    max-width: 320px;
    height: 44px;
    font-size: 14px;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .time-period-card.mobile .time-inputs-group {
    flex-direction: row;
    gap: 12px;
    align-items: center;
  }
  
  .time-period-card.mobile .time-input-item {
    max-width: 160px;
    min-height: 70px;
    flex: 1;
  }
}

/* 平板端优化 */
@media (min-width: 481px) and (max-width: 768px) {
  .time-period-card {
    padding: 18px;
  }
  
  .time-inputs-group {
    gap: 16px;
  }
  
  .time-input-item .el-time-picker {
    width: 130px;
  }
  
  .time-input-item {
    flex: 1;
    max-width: 180px;
  }
  
  /* 预设表单优化 */
  .time-inputs .time-input-group {
    max-width: 160px;
  }
  
  .time-inputs .el-time-picker {
    width: 130px;
  }
  
  /* 预设表单标题优化 */
  .preset-time-title {
    font-size: 16px;
    padding: 14px;
  }
}

/* 桌面端优化 */
@media (min-width: 769px) {
  .time-inputs-group {
    gap: 24px;
  }
  
  .time-input-item {
    min-width: 160px;
    max-width: 220px;
  }
  
  /* 预设表单优化 */
  .time-inputs {
    gap: 24px;
  }
  
  .time-inputs .time-input-group {
    min-width: 160px;
    max-width: 220px;
  }
  
  .time-inputs .el-time-picker {
    width: 160px;
  }
}

.dialog-footer {
  text-align: right;
  padding: 20px 0 0 0;
  border-top: 1px solid #f0f0f0;
}

/* 自定义预设样式 */
.custom-presets {
  border-top: 1px solid #e9ecef;
  padding-top: 20px;
}

.custom-presets h5 {
  text-align: center;
  margin-bottom: 20px;
  color: #666;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.3s ease;
}

/* 深色主题下的自定义预设标题 */
.dark-theme .custom-presets h5 {
  color: #b0b0b0;
}

/* 手机端自定义预设样式优化 */
@media (max-width: 768px) {
  .custom-presets {
    padding-top: 12px;
  }
  
  .custom-presets h5 {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

.preset-list {
  margin-bottom: 15px;
}

/* 手机端预设列表样式 */
.preset-list.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.preset-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 深色主题下的预设项 */
.dark-theme .preset-item {
  background: #3a3a3a;
  border-color: #404040;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.preset-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 手机端预设项样式优化 */
@media (max-width: 768px) {
  .preset-item {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }
  
  .preset-item:hover {
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }
}

.preset-name {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  transition: color 0.3s ease;
}

/* 深色主题下的预设名称 */
.dark-theme .preset-name {
  color: #ffffff;
}

.preset-actions {
  display: flex;
  gap: 8px;
}

.preset-actions .el-button {
  height: 36px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

/* 预设表单样式 */
.preset-form {
  max-height: 60vh;
  overflow-y: auto;
}

/* 预设名称部分 */
.preset-name-section {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 深色主题下的预设名称区域 */
.dark-theme .preset-name-section {
  background: #2a2a2a;
  border-color: #404040;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.preset-name-title {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: color 0.3s ease;
}

/* 深色主题下的预设名称标题 */
.dark-theme .preset-name-title {
  color: #ffffff;
}

.preset-name-input {
  width: 100%;
}

.preset-name-input .el-input__wrapper {
  border-radius: 10px;
  height: 44px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.preset-name-input .el-input__wrapper:hover {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.preset-name-input .el-input__wrapper:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15);
}

/* 时间设置部分 */
.preset-time-settings {
  margin-bottom: 20px;
}

.preset-time-title {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f0ff 100%);
  border-radius: 12px;
  border: 1px solid #e1f0ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  transition: all 0.3s ease;
}

/* 深色主题下的时间设置标题 */
.dark-theme .preset-time-title {
  color: #ffffff;
  background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%);
  border-color: #2a4a6a;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.form-item {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

/* 深色主题下的表单项 */
.dark-theme .form-item {
  background: #2a2a2a;
  border-color: #404040;
}

.form-item label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  text-align: center;
  transition: color 0.3s ease;
}

/* 深色主题下的表单标签 */
.dark-theme .form-item label {
  color: #ffffff;
}

/* 手机端预设表单样式优化 */
@media (max-width: 768px) {
  .preset-form .form-item {
    margin-bottom: 16px;
    padding: 10px;
    border-radius: 8px;
  }
  
  .preset-form .form-item label {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  /* 手机端预设名称部分 */
  .preset-name-section {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 12px;
  }
  
  .preset-name-title {
    font-size: 15px;
    margin-bottom: 12px;
  }
  
  .preset-name-input .el-input__wrapper {
    height: 40px;
    border-radius: 8px;
  }
  
  /* 手机端时间设置标题 */
  .preset-time-title {
    font-size: 16px;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 8px;
  }
}

.time-inputs {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.time-inputs .time-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
  max-width: 200px;
}

.time-inputs .time-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-align: center;
  margin-top: 4px;
  transition: color 0.3s ease;
}

/* 深色主题下的时间标签 */
.dark-theme .time-inputs .time-label {
  color: #b0b0b0;
}

/* 移除分隔符样式，因为不再需要 */
.time-inputs .time-separator {
  display: none;
}

.time-inputs .el-time-picker {
  width: 140px;
}

.time-inputs .el-time-picker .el-input__wrapper {
  border-radius: 8px;
  height: 44px;
}









.rest-time-display {
  text-align: center;
  margin-bottom: 25px;
  padding: 30px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f0ff 100%);
  border-radius: 20px;
  border: 2px solid #e1f0ff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* 深色主题下的休息时间显示 */
.dark-theme .rest-time-display {
  background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%);
  border-color: #2a4a6a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.rest-icon {
  font-size: 64px;
  color: #764ba2;
  margin-bottom: 15px;
  filter: drop-shadow(0 2px 4px rgba(118, 75, 162, 0.2));
}

.rest-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}

/* 深色主题下的休息标题 */
.dark-theme .rest-title {
  color: #ffffff;
}

.rest-message {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
  transition: color 0.3s ease;
}

/* 深色主题下的休息消息 */
.dark-theme .rest-message {
  color: #b0b0b0;
}

.next-work-info {
  font-size: 16px;
  color: #409eff;
  font-weight: 600;
  padding: 12px 20px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 25px;
  border: 1px solid rgba(64, 158, 255, 0.2);
  display: inline-block;
}

/* 手机端休息时间显示优化 */
@media (max-width: 768px) {
  .rest-time-display {
    padding: 20px;
    border-radius: 15px;
  }
  
  .rest-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }
  
  .rest-title {
    font-size: 24px;
    margin-bottom: 12px;
  }
  
  .rest-message {
    font-size: 16px;
    margin-bottom: 16px;
  }
  
  .next-work-info {
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 20px;
  }
}



.work-schedule-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

/* 深色主题下的工作时间安排 */
.dark-theme .work-schedule-display {
  background: #2a2a2a;
  border-color: #404040;
}

.schedule-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  text-align: center;
}

.schedule-item.active {
  background: #e3f2fd;
  border-color: #2196f3;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
}

.schedule-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.schedule-time {
  font-size: 12px;
  color: #999;
}

.schedule-status {
  font-size: 10px;
  color: #409eff;
  font-weight: 600;
}

 .work-time-card {
            /* 工作时间卡片样式 */
    font-size: 10px;
    position: fixed;
    top: 1rem;
    right: 1rem;

    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0rem;

        }
#work-time {
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-bottom: 10px;
}

/* 深色主题下的work-time区域样式 */
.dark-theme #work-time {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme #work-time p {
    color: #e2e8f0 !important;
    margin: 8px 0;
    font-weight: 500;
}

.dark-theme #work-time span  {
    color: #e2e8f0 !important;
}

.dark-theme #work-time  .work-time-ing  {
  color: #ef4444 !important;
}
.dark-theme #work-time span:not(.work-time-state) {
    color: #cbd5e1 !important;
    font-weight: 600;
}
#date-time {
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
    padding: 10px;
}

/* 深色主题下的date-time区域样式 */
.dark-theme #date-time {
    background-color: rgba(30, 41, 59, 0.8) !important;
    color: #e2e8f0;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.dark-theme #date-time p {
    color: #e2e8f0;
}

.dark-theme #date-time span {
    color: #e2e8f0;
}
.countdown-card .work-time-card {
  text-align: left;
  margin-bottom: 20px;
}
.work-time-state{
 background-color: #e9ed08;
 padding: 1px 1px;
 border-radius: 4px;
 font-weight: 600;
 color: #1f2937;
}

/* 深色主题下的work-time-state样式 */
.dark-theme .work-time-state {
  /* background-color: #fbbf24 !important; */
  background-color: transparent;
  color: #1f2937 !important;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.work-time-ing {
  color: #ef4444 !important;

}
.dark-theme .work-time-ing {
  /* color: #ffffff !important; */
  color: #ef4444 !important;
  /* background-color: #ef4444 !important; */
  background-color: transparent;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  /* box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3); */
}
/* 深色主题下的work-time-card文字样式 */
.dark-theme .work-time-card {
  color: #e2e8f0;
}

.dark-theme .work-time-card p {
  color: #e2e8f0;
}

.dark-theme .work-time-card span {
  color: #e2e8f0;
}

.dark-theme .work-time-state {
  /* background-color: #fbbf24 !important; */
  background-color: transparent;
  color: #1f2937 !important;
  font-weight: 600;
}

.dark-theme .work-time-ing {
  color: #ef4444 !important;
   /* background-color: #fbbf24 !important; */
  /* background-color: rgba(239, 68, 68, 0.2) !important; */
}

.dark-theme #date-time {
  background-color: rgba(30, 41, 59, 0.8) !important;
  color: #e2e8f0;
  border: 1px solid rgba(71, 85, 105, 0.3);
}

.dark-theme #date-time p {
  color: #e2e8f0;
}

/* 深色主题下的countdown-card文字样式 */
.dark-theme .countdown-card {
  color: #e2e8f0;
}

.dark-theme .countdown-card p {
  color: #e2e8f0;
}

.dark-theme .countdown-card span {
  color: #e2e8f0;
}

.dark-theme .countdown-card h1,
.dark-theme .countdown-card h2,
.dark-theme .countdown-card h3,
.dark-theme .countdown-card h4,
.dark-theme .countdown-card h5,
.dark-theme .countdown-card h6 {
  color: #ffffff;
}

/* 深色主题下的welcome-section文字样式 */
.dark-theme .welcome-section {
  color: #e2e8f0;
}

.dark-theme .welcome-section h2 {
  color: #ffffff;
}

/* 深色主题下的countdown-display3文字样式 */
.dark-theme .countdown-display3 {
  color: #e2e8f0;
}

.dark-theme .countdown-display3 p {
  color: #e2e8f0;
}

.dark-theme .countdown-display3 span {
  color: #e2e8f0;
}

.duration-selector {
  flex: 0 0 auto;
  min-width: 80px;
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 32px;
  max-height: 32px; /* 确保不超过容器高度 */
  display: flex;
  align-items: center;
  overflow: hidden; /* 防止内容溢出 */
}

.duration-selector:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 深色主题下的样式 */
.dark-theme .duration-selector {
  background: rgba(40, 40, 40, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-theme .duration-selector:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* el-select 样式优化 - 修正为small尺寸 */
::v-deep .duration-selector .el-select--small .el-select__wrapper {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  transition: all 0.3s ease;
  height: 24px;
  max-height: 24px;
  overflow: visible;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 80px;
}

::v-deep .duration-selector .el-select--small .el-select__wrapper:hover {
  background: rgba(59, 130, 246, 0.05);
}

::v-deep .duration-selector .el-select--small .el-select__wrapper.is-focused {
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

::v-deep .duration-selector .el-select--small .el-select__placeholder {
  color: #64748b;
  font-size: 12px;
}

::v-deep .duration-selector .el-select--small .el-select__selected-item {
  color: #1e293b;
  font-size: 12px;
  font-weight: 500;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

::v-deep .duration-selector .el-select {
  width: 100%;
  max-width: none;
}

 .countdown-display-rest{
      margin-top: 30px;
  }

/* 深色主题下的 el-select 样式 */
.dark-theme ::v-deep .duration-selector .el-select--small .el-select__wrapper {
  background: transparent;
  border: none;
  color: #e2e8f0;
}

.dark-theme ::v-deep .duration-selector .el-select--small .el-select__wrapper:hover {
  background: rgba(59, 130, 246, 0.1);
}

.dark-theme ::v-deep .duration-selector .el-select--small .el-select__wrapper.is-focused {
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.dark-theme ::v-deep .duration-selector .el-select--small .el-select__placeholder {
  color: #94a3b8;
}



.countdown-display3{
  margin: 170px auto 10px auto; /* 大幅减少上边距 */
  width: fit-content; /* 根据内容自适应宽度 */
  text-align: center;
  padding: 4px 8px;
  /* 启用弹性布局，子元素横向排列 */
  display: flex;
  /* 子元素在主轴（水平方向）上的对齐方式：可根据需求调整 */
  justify-content: center; /* 居中对齐 */
  /* 子元素在交叉轴（垂直方向）上的对齐方式：居中对齐 */
  align-items: center;
  /* 避免内容溢出时换行（保持在同一行） */
  flex-wrap: nowrap;
  /* 可选：添加内边距和间距 */
  gap: 4px; /* 子元素之间的间距 */
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  height: 40px; /* 进一步减少高度 */
}

/* 深色主题下的样式 - 现代设计 */
.dark-theme .countdown-display3 {
  /* background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%); */
    background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(71, 85, 105, 0.3);
}

.dark-theme .countdown-display3::before {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
}

.dark-theme .duration-selector {
  /* background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); */
  border: 1px solid rgba(71, 85, 105, 0.6);
  color: #e2e8f0;
}

.dark-theme .duration-selector:hover {
  /* background: linear-gradient(135deg, #334155 0%, #1e293b 100%); */
  border-color: rgba(59, 130, 246, 0.5);
}

.dark-theme .countdown-controls {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(71, 85, 105, 0.4);
}

/* countdown-display3 中的 time-display 样式 */
.countdown-display3 .time-display {
  flex: 0 0 auto;
  min-width: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #409eff;
  font-family: 'Courier New', monospace;
  padding: 3px 6px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f0ff 100%);
  border-radius: 4px;
  border: 1px solid #e1f0ff;
  box-shadow: 0 1px 3px rgba(64, 158, 255, 0.2);
  transition: all 0.3s ease;
  text-align: center;
  letter-spacing: 0.3px;
  height: 32px;
  max-height: 32px; /* 确保不超过容器高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 防止内容溢出 */
}

.countdown-display3 .time-display:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
}

/* 深色主题下的 time-display 样式 */
.dark-theme .countdown-display3 .time-display {
  /* background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%); */
   background: rgba(40, 40, 40, 0.9);
  border-color: #2a4a6a;
  color: white;
  box-shadow: 0 4px 15px rgba(100, 181, 246, 0.2);
}

.dark-theme .countdown-display3 .time-display:hover {
  box-shadow: 0 6px 20px rgba(100, 181, 246, 0.3);
}

/* countdown-controls 样式 */
.countdown-controls {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 32px;
  max-height: 32px; /* 确保不超过容器高度 */
  overflow: hidden; /* 防止内容溢出 */
}

.countdown-controls:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 深色主题下的 countdown-controls 样式 */
.dark-theme .countdown-controls {
  background: rgba(40, 40, 40, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-theme .countdown-controls:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* record-controls-btn 按钮样式 */
.record-controls-btn {
  min-width: 30px;
  height: 26px;
  max-height: 26px; /* 确保不超过父容器高度 */
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 2px 4px;
  overflow: hidden; /* 防止内容溢出 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-controls-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.record-controls-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 不同状态按钮的特殊样式 - 现代设计 */
.record-controls-btn.el-button--primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.record-controls-btn.el-button--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
}

.record-controls-btn.el-button--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.record-controls-btn.el-button--danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.record-controls-btn.el-button--info {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* 手机端工作时间安排优化 */
@media (max-width: 768px) {
  .work-schedule-display {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
  }
  .countdown-card {
    margin: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
   }
  
  
  /* countdown-display3 手机端优化 - 现代卡片设计 */
  .countdown-display3 {
    flex-direction: row; /* 保持一行显示 */
    gap: 8px;
    padding: 8px 12px;
    margin: 15px auto 8px auto;
    max-width: 95%;
    height: 48px; /* 增加高度，提供更好的视觉空间 */
    width: fit-content;
    border-radius: 16px; /* 更大的圆角，更现代 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
  }
  
  .countdown-display3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.3), transparent);
  }
  
  .duration-selector {
    min-width: 90px;
    width: auto;
    max-width: 110px;
    margin: 0;
    padding: 4px 8px;
    height: 32px;
    max-height: 32px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  
  .duration-selector:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-color: rgba(64, 158, 255, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(64, 158, 255, 0.1);
  }
  
  .countdown-display3 .time-display {
    font-size: 14px;
    min-width: 55px;
    width: auto;
    max-width: 70px;
    margin: 0;
    padding: 6px 10px;
    height: 32px;
    max-height: 32px;
    overflow: hidden;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    position: relative;
  }
  
  .countdown-display3 .time-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border-radius: 12px;
    pointer-events: none;
  }
  
  .countdown-display3 .time-display:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  
  .countdown-controls {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 4px 6px;
    gap: 4px;
    height: 32px;
    max-height: 32px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.8) 100%);
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .record-controls-btn {
    min-width: 32px;
    height: 24px;
    max-height: 24px;
    font-size: 10px;
    flex: 0 0 auto;
    max-width: 45px;
    padding: 3px 6px;
    overflow: hidden;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .record-controls-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    border-radius: 8px;
    pointer-events: none;
  }
  
  .record-controls-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  .record-controls-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  /* 移动端 el-select 样式优化 */
  ::v-deep .duration-selector .el-select--small .el-select__wrapper {
    height: 24px;
    max-height: 24px;
    padding: 2px 6px;
    font-size: 11px;
    min-width: 70px;
  }
  
  ::v-deep .duration-selector .el-select--small .el-select__selected-item {
    font-size: 11px;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
  }
  
  ::v-deep .duration-selector .el-select--small .el-select__placeholder {
    font-size: 11px;
  }
}

/* 超小屏幕优化 - 现代设计 */
@media (max-width: 480px) {
  .countdown-display3 {
    padding: 6px 10px;
    gap: 6px;
    height: 44px;
    width: fit-content;
    margin: 190px auto 3px auto;
    border-radius: 14px;
    max-width: 98%;
  }
  
  .duration-selector {
    min-width: 70px;
    max-width: 85px;
    padding: 3px 6px;
    height: 28px;
    max-height: 28px;
    overflow: hidden;
    border-radius: 10px;
  }
  
  .countdown-display3 .time-display {
    font-size: 12px;
    min-width: 45px;
    max-width: 60px;
    padding: 4px 8px;
    height: 28px;
    max-height: 28px;
    overflow: hidden;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  
  .countdown-controls {
    padding: 3px 5px;
    gap: 3px;
    height: 28px;
    max-height: 28px;
    overflow: hidden;
    border-radius: 10px;
  }
  
  .record-controls-btn {
    min-width: 26px;
    height: 20px;
    max-height: 20px;
    font-size: 9px;
    max-width: 38px;
    padding: 2px 4px;
    overflow: hidden;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  
  /* 超小屏幕 el-select 样式优化 */
  ::v-deep .duration-selector .el-select--small .el-select__wrapper {
    height: 20px;
    max-height: 20px;
    padding: 1px 4px;
    font-size: 10px;
    min-width: 60px;
  }
  
  ::v-deep .duration-selector .el-select--small .el-select__selected-item {
    font-size: 10px;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
  }
  
  ::v-deep .duration-selector .el-select--small .el-select__placeholder {
    font-size: 10px;
  }
  
  .schedule-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    background: #ffffff;
  }
  
  .schedule-item.active {
    background: #e3f2fd;
    border-color: #2196f3;
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
  }
  
  .schedule-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
  }
  
  .schedule-time {
    font-size: 11px;
    color: #666;
  }
  
  .schedule-status {
    font-size: 9px;
    color: #409eff;
    font-weight: 600;
    padding: 2px 6px;
    background: rgba(64, 158, 255, 0.1);
    border-radius: 10px;
  }
}

/* 超小屏幕工作时间安排优化 */
@media (max-width: 375px) {
  .work-schedule-display {
    padding: 10px;
    margin-bottom: 10px;
    gap: 8px;
  }
  
  .schedule-item {
    padding: 8px;
  }
  
  .schedule-label {
    font-size: 12px;
  }
  
  .schedule-time {
    font-size: 10px;
  }
  
  .schedule-status {
    font-size: 8px;
    padding: 1px 5px;
  }
}

/* 不同状态的样式 */
.schedule-item.ongoing {
  background: #e3f2fd;
  border-color: #2196f3;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
}

.schedule-item.completed {
  background: #f3f4f6;
  border-color: #d1d5db;
  opacity: 0.8;
}

.schedule-item.upcoming {
  background: #fef3c7;
  border-color: #f59e0b;
  opacity: 0.9;
}

.schedule-time.ongoing {
  color: #1976d2;
  font-weight: 600;
}

.schedule-time.completed {
  color: #6b7280;
  text-decoration: line-through;
}

.schedule-time.upcoming {
  color: #d97706;
  font-weight: 500;
}

.schedule-status.ongoing {
  color: #1976d2;
  background: rgba(25, 118, 210, 0.1);
  
}

.schedule-status.completed {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}

.schedule-status.upcoming {
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
}

/* 深色主题下的Element Plus组件样式覆盖 */
.dark-theme .el-dialog {
  background-color: #2a2a2a;
  border-color: #404040;
}

/* 深色主题下的手机端优化 */
@media (max-width: 768px) {
  .dark-theme .countdown-card {
    background: rgba(45, 45, 45, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  
  /* 深色主题下的触摸反馈 */
  .dark-theme .time-period-card:active {
    transform: scale(0.98);
    background: #2a2a2a;
  }
  
  .dark-theme .preset-item:active {
    transform: scale(0.98);
    background: #2a2a2a;
  }
  
  .dark-theme .el-button:active {
    transform: scale(0.95);
  }
  
  /* 深色主题下的手机端滚动条 */
  .dark-theme .settings-content::-webkit-scrollbar-track {
    background: #2a2a2a;
  }
  
  .dark-theme .settings-content::-webkit-scrollbar-thumb {
    background: #404040;
  }
  
  .dark-theme .settings-content::-webkit-scrollbar-thumb:hover {
    background: #505050;
  }
  
  .dark-theme .countdown-time {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
    border-color: #404040;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  }
  
  .dark-theme .progress-section {
    background: #2a2a2a;
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .dark-theme .rest-time-display {
    background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%);
    border-color: #2a4a6a;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  }
  
  .dark-theme .work-schedule-display {
    background: #2a2a2a;
    border-color: #404040;
  }
  
  .dark-theme .setting-section {
    background: #2a2a2a;
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .dark-theme .time-period-card {
    background: #3a3a3a;
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .dark-theme .preset-item {
    background: #3a3a3a;
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

.dark-theme .el-dialog__header {
  background-color: #2a2a2a;
  border-bottom-color: #404040;
}

.dark-theme .el-dialog__title {
  color: #ffffff;
}

.dark-theme .el-dialog__body {
  background-color: #2a2a2a;
  color: #ffffff;
}

.dark-theme .el-dialog__footer {
  background-color: #2a2a2a;
  border-top-color: #404040;
}

.dark-theme .el-input__wrapper {
  background-color: #3a3a3a;
  border-color: #404040;
  color: #ffffff;
}

.dark-theme .el-input__inner {
  color: #ffffff;
}

.dark-theme .el-time-picker .el-input__wrapper {
  background-color: #3a3a3a;
  border-color: #404040;
}

.dark-theme .el-time-picker .el-input__inner {
  color: #ffffff;
}

.dark-theme .el-dropdown-menu {
  background-color: #2a2a2a;
  border-color: #404040;
}

.dark-theme .el-dropdown-menu__item {
  color: #ffffff;
}

.dark-theme .el-dropdown-menu__item:hover {
  background-color: #3a3a3a;
}

/* 深色主题下的状态样式 */
.dark-theme .schedule-item.ongoing {
  background: #4a4e53;
  border-color: #409eff;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
}

/* 深色主题下的视觉增强 */
.dark-theme .countdown-card {
  position: relative;
}

.dark-theme .countdown-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-radius: 16px;
  pointer-events: none;
}

.dark-theme .time-value {
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.dark-theme .period-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .progress-fill {
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

/* 深色主题下的无障碍性优化 */
.dark-theme .countdown-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme .time-period-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme .preset-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 深色主题下的焦点状态 */
.dark-theme .el-input__wrapper:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.dark-theme .el-time-picker .el-input__wrapper:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 深色主题下的悬停效果 */
.dark-theme .time-period-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark-theme .preset-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark-theme .schedule-item.completed {
  background: #f3f4f6;
  border-color: #404040;
  opacity: 0.8;
}

.dark-theme .schedule-item.upcoming {
  background: #5c5064;
  border-color: #5f4e5e;
  opacity: 0.9;
}

.dark-theme .schedule-time.ongoing {
  color: #409eff;
  font-weight: 600;
}

.dark-theme .schedule-time.completed {
  color: #808080;
  text-decoration: line-through;
}

.dark-theme .schedule-time.upcoming {
  color: #9e85a1;
  font-weight: 500;
}

.dark-theme .schedule-status.ongoing {
  color: #409eff;
  background: rgba(64, 158, 255, 0.2);
  border-radius: 30px;
}

.dark-theme .schedule-status.completed {
  color: #10b981;
  background: rgba(16, 185, 129, 0.2);
}

.dark-theme .schedule-status.upcoming {
  color: #432154;
  background: rgba(241, 174, 243, 0.2);
}
    
.dark-theme .settings-content .setting-section:has(.preset-buttons.mobile)  {
    background: transparent;
  }
.dark-theme .setting-section{
    background: transparent;
}



    
</style>
<style>
  :root {
      --dialog-bg: #ffffff;
    }
  .dark-theme {
   --dialog-bg: #808080;; /* 在深色主题类下，重新定义对话框背景颜色为深色 */
   }

  .el-dialog {
      background: var(--dialog-bg);
  }
.dark-theme .work-container .el-main {
  background: rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(8px);
}
.schedule-item {
  border-radius: 30px;
  margin: 3px;
 
}
</style>
<style>
.dark-theme .duration-selector .el-select--small .el-select__selected-item {
  color: #e2e8f0;
}
.dark-theme  .countdown-display3{
  margin: 180px auto 10px auto; /* 减少下边距 */
  }
@media (max-width: 480px) {
.dark-theme  .countdown-display3{
  margin: 220px auto 10px auto; /* 减少下边距 */
  }
}
/* 桌面端优化 - 确保内容一次性显示 */
@media (min-width: 1024px) {
  .work-container {
    min-height: 100vh;
    overflow-y: auto;
  }
  
  .main {
    padding: 8px;
    min-height: calc(100vh - 60px);
  }
  
  .countdown-card {
    padding: 12px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    width: 80%;
  }
  
  .welcome-section h2 {
    margin: 8px 0 8px 0;
    font-size: 22px;
  }
  
  .welcome-section-rest h2 {
    margin: 15px 0 8px 0;
  }
  
  .countdown-display3 {
    margin: 15px auto 8px auto;
    height: 36px;
    max-width: 500px;
  }
  
  .countdown-card .work-time-card {
    margin-bottom: 15px;
    /* padding: 15px !important; */
  }
  
  .work-time-card {
    /* padding: 15px !important; */
  }
  
  .progress-section {
    padding: 12px !important;
    margin-top: 15px !important;
  }
  
  .progress-section .progress-info {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  
  .progress-section .progress-bar {
    height: 6px !important;
    margin-bottom: 8px !important;
  }
  
  .progress-section .progress-details {
    font-size: 11px !important;
    margin-top: 6px !important;
  }
  
  .progress-section .progress-percentage {
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  
  #work-time {
    padding: 6px !important;
    margin-bottom: 6px !important;
  }
  
  #work-time p {
    font-size: 12px !important;
    margin: 4px 0 !important;
    line-height: 1.3 !important;
  }
  
  #work-time span {
    font-size: 12px !important;
  }
  
  .work-time-state {
    padding: 2px 4px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
  }
  
  #date-time {
    padding: 6px !important;
    margin-bottom: 6px !important;
  }
  
  #date-time p {
    font-size: 11px !important;
    margin: 2px 0 !important;
  }
  
  .date-display {
    font-size: 11px !important;
  }
}

/* 深色主题下的桌面端优化 */
@media (min-width: 1024px) {
  .dark-theme .countdown-card {
    padding: 12px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    width: 80%;
  }
  
  .dark-theme .countdown-display3 {
    /* margin: 15px auto 8px auto; */
     margin: 170px auto 10px auto; /* 大幅减少上边距 */
    max-width: 500px;
  }
  
  .dark-theme .work-time-card {
    /* padding: 15px !important; */
  }
  
  .dark-theme .progress-section {
    padding: 12px !important;
    margin-top: 15px !important;
  }
  
  .dark-theme .progress-section .progress-info {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  
  .dark-theme .progress-section .progress-bar {
    height: 6px !important;
    margin-bottom: 8px !important;
  }
  
  .dark-theme .progress-section .progress-details {
    font-size: 11px !important;
    margin-top: 6px !important;
  }
  
  .dark-theme .progress-section .progress-percentage {
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  
  .dark-theme #work-time {
    padding: 6px !important;
    margin-bottom: 6px !important;
  }
  
  .dark-theme #work-time p {
    font-size: 12px !important;
    margin: 4px 0 !important;
    line-height: 1.3 !important;
  }
  
  .dark-theme #work-time span {
    font-size: 12px !important;
  }
  
  .dark-theme .work-time-state {
    padding: 2px 4px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
  }
  
  .dark-theme #date-time {
    padding: 6px !important;
    margin-bottom: 6px !important;
  }
  
  .dark-theme #date-time p {
    font-size: 11px !important;
    margin: 2px 0 !important;
  }
  
  .dark-theme .date-display {
    font-size: 11px !important;
  }
}

/* 大屏幕优化 - 超宽屏幕 */
@media (min-width: 1440px) {
  .countdown-card {
    max-width: 800px;
    width: 80%;
  }
  
  .countdown-display3 {
    max-width: 600px;
  }
  
  .dark-theme .countdown-card {
    max-width: 800px;
    width: 80%;
  }
  
  .dark-theme .countdown-display3 {
    max-width: 600px;
  }
}

/* 超大屏幕优化 */
@media (min-width: 1920px) {
  .countdown-card {
    max-width: 800px;
    width: 60%;
  }
  
  .countdown-display3 {
    max-width: 700px;
  }
  
  .dark-theme .countdown-card {
    max-width: 800px;
    width: 60%;
  }
  
  .dark-theme .countdown-display3 {
    max-width: 700px;
  }
}
</style>
